0

Well, I just installed fresh Laravel 5.4. Then installed npm and decided first time to use webpack instead of gulp.js. As you know, Laravel default provides sass Bootstrap integration. Used this command to generate my css from sass.

npm run dev

Bootstrap, Jquery worked perfect, but Glyphicons weren't displayed. Checking my public/css/app.css I saw, that Glyphicons font-face path are not suitable.

 src: url(/fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1);

If I, manually use ../fonts instead of /fonts it will work. I tried to figure out and edit the default path. In _variables.css I set:

$icon-font-path = "../fonts" - but npm gives error.

By default it is: "~bootstrap-sass/assets/fonts/bootstrap/"

Copied fonts folder inside puclic/css folder, didn't work.

Added options to the webpack.mix.js file:

options({processCssUrls: false})

and in _variables.css again set: 

$icon-font-path = "../fonts"

Run npm-run-dev and it worked, glyphicons were displayed. But, I don't want to set false for processCssUrls. Because, in this case I will not able to minimize css files using command: npm run production.

Also, I followed this question, but couldn't find any answer, all solutions didn't work.

glyphicons not showing with sass bootstrap integration

Community
  • 1
  • 1
Rashad
  • 1,344
  • 2
  • 17
  • 33

1 Answers1

1

Finally, found the solution. In webpack.config.js set:

publicPath: '../'

instead of Mix.resourceRoot

{
    test: /\.(woff2?|ttf|eot|svg|otf)$/,
    loader: 'file-loader',
    options: {
        name: 'fonts/[name].[ext]?[hash]',
        publicPath: Mix.resourceRoot
    }
},
Rashad
  • 1,344
  • 2
  • 17
  • 33
  • This finally worked for me but because i did not want to edit the config file in the `node_modules` folder directly i chose to copy the whole file to my root folder and change the `package.json` file to point to the new config `"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",` changed to `"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js",` – Rene Vorndran Apr 06 '17 at 19:56