Ошибка компиляции с Symfony Webpack Encore и FontAwesome - PullRequest
Новая
       29

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

0 голосов
/ 17 ноября 2018

В настоящее время я пишу приложение 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):

(функция () {^ Неверный 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 в 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 компилировать для производства.

1 Ответ

0 голосов
/ 19 ноября 2018

Изменение моего 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";
...