Laravel 5.4 - Bootstrap glyphicons 在 sass 集成后不起作用答案

【问题标题】：Laravel 5.4 - Bootstrap glyphicons don't work after sass integrationLaravel 5.4 - Bootstrap glyphicons 在 sass 集成后不起作用
【发布时间】：2017-04-02 08:09:35
【问题描述】：

好吧，我刚刚安装了新的 Laravel 5.4。然后安装 npm 并决定第一次使用 webpack 而不是 gulp.js。如你所知，Laravel 默认提供 sass Bootstrap 集成。使用此命令从 sass 生成我的 css。

npm run dev

Bootstrap，Jquery 运行完美，但没有显示 Glyphicons。检查我的public/css/app.css 看到，Glyphicons 字体路径不合适。

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

如果我手动使用../fonts 而不是/fonts 它将起作用。我试图找出并编辑默认路径。在_variables.css我设置：

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

默认为："~bootstrap-sass/assets/fonts/bootstrap/"

在puclic/css 文件夹中复制字体文件夹，无效。

为webpack.mix.js 文件添加了选项：

options({processCssUrls: false})

并在_variables.css 中再次设置：

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

运行npm-run-dev 并运行，显示字形图标。但是，我不想为 processCssUrls 设置 false。因为，在这种情况下，我将无法使用以下命令最小化 css 文件：npm run production。

另外，我关注了这个问题，但找不到任何答案，所有解决方案都不起作用。

glyphicons not showing with sass bootstrap integration

【问题讨论】：

标签： laravel laravel-5.4

【解决方案1】：

终于找到了解决办法。在webpack.config.js 设置：

publicPath: '../'

而不是Mix.resourceRoot

{
    test: /\.(woff2?|ttf|eot|svg|otf)$/,
    loader: 'file-loader',
    options: {
        name: 'fonts/[name].[ext]?[hash]',
        publicPath: Mix.resourceRoot
    }
},

【讨论】：

这终于对我有用，但因为我不想直接编辑node_modules 文件夹中的配置文件，我选择将整个文件复制到我的根文件夹并将package.json 文件更改为指向新配置 "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 更改为 "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js",