Symfony Webpack Encore 和 FontAwesome 的编译错误

Question

我目前正在使用 Bootstrap 和 FontAwesome Pro 编写 Symfony 3.4 应用程序。我有以下自定义 .scss 文件：

$theme-colors: (
    "burnt-orange": #fa7334,
    "light-blue": #67e2f5,
    "dark-blue": #006f80,
    "beige": #f5d5bc
);

@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-pro";

我的/project_root/app/Resources/js/app.js:

import '../scss/custom.scss';
import $ from 'jquery';
global.$ = global.jQuery = $;
window.Popper = require('popper.js');

require('bootstrap');

我的webpack.config.js:

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .enableVersioning()
    .addEntry('app', './app/Resources/assets/js/app.js')
    .enableSassLoader()
    .autoProvidejQuery()
    .enableSourceMaps(!Encore.isProduction())
    .cleanupOutputBeforeBuild()
;

module.exports = Encore.getWebpackConfig();

以及我的 package.json 中的相关脚本：

"scripts": {
    "dev": "encore dev --watch"
  }

当我尝试运行 $ npm run dev 时，出现以下错误：

webpack is watching the files…

ERROR Failed to compile with 1 errors
10:01:31 PM

error in ./app/Resources/assets/scss/custom.scss

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

(function () { ^ Invalid CSS after " */": expected selector, was "(function () {" in /home/kevin/www/diva/node_modules/@fortawesome/fontawesome-pro/js/fontawesome.js (line 5, column 1) at runLoaders (/home/kevin/www/diva/node_modules/webpack/lib/NormalModule.js:286:20) at /home/kevin/www/diva/node_modules/loader-runner/lib/LoaderRunner.js:364:11 at /home/kevin/www/diva/node_modules/loader-runner/lib/LoaderRunner.js:230:18 at context.callback (/home/kevin/www/diva/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at Object.render [as callback] (/home/kevin/www/diva/node_modules/sass-loader/lib/loader.js:52:13) at Object.done [as callback] (/home/kevin/www/diva/node_modules/neo-async/async.js:8077:18) at options.error (/home/kevin/www/diva/node_modules/node-sass/lib/index.js:294:32)

@ ./app/Resources/assets/js/app.js 1:0-29

显然，错误与我尝试包含 FontAwesome 的方式有关，但我是节点、Bootstrap 和 FontAwesome 的新手，所以我不太确定如何继续。我什至需要导入 FontAwesome 吗？ Their docs 说简单地引用模块的 css/all.css，但由于相同的文档说将 FontAwesome 模块保存为开发依赖项，我不确定当我告诉 Webpack Encore 编译时它是否可用生产。

Answer 1

将我的 custom.scss 文件更改为此（注意最后一行）解决了问题：

$theme-colors: (
    "burnt-orange": #fa7334,
    "light-blue": #67e2f5,
    "dark-blue": #006f80,
    "beige": #f5d5bc
);

@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-pro/css/all.css";

Symfony Webpack Encore 和 FontAwesome 的编译错误

Compilation error with Symfony Webpack Encore and FontAwesome

bootstrap-4

symfony-3.4

font-awesome-5

webpack-encore