Ошибка компиляции с Symfony Webpack Encore и FontAwesome

Question

В настоящее время я пишу приложение Symfony 3.4 с Bootstrap и FontAwesome Pro. У меня есть следующий пользовательский файл.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Я получаю следующую ошибку:

Веб-пакет просматривает файлы...

ОШИБКА Не удалось скомпилировать с 1 ошибкой
10:01:31

ошибка в./app/Resources/assets/scss/custom.scss

Сбой сборки модуля (из./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Сбой сборки модуля (из./node_modules/sass-loader/lib/loader.js):

(function () {^ Неверный CSS после " */": ожидаемый селектор был "(function () {" в /home/kevin/www/diva/node_modules/@fortawesome/fontawesome-pro/js/fontawesome.js (строка 5, столбец 1) в runLoaders (/home/kevin/www/diva/node_modules/webpack/lib/NormalModule.js:286:20) в /home/kevin/www/diva/node_modules/loader-runner/lib/LoaderRunner.js:364:11 на /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) в Object.render [в качестве обратного вызова] (/home/kevin/www/diva/node_modules/sass-loader/lib/loader.js:52:13) в Object.done [как обратный вызов] (/home/kevin/www/diva/node_modules/neo-async/async.js:8077:18) в 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, но я новичок в node, Bootstrap и FontAwesome, поэтому я не совсем уверен, как действовать дальше. Мне даже нужно импортировать FontAwesome? Их документы говорят просто ссылаться на модуль 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";