Compilation error with Symfony Webpack Encore and FontAwesome

Question

I'm currently writing a Symfony 3.4 app with Bootstrap and FontAwesome Pro. I have the following custom .scss file:

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

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

My /project_root/app/Resources/js/app.js:

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

require('bootstrap');

My 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();

And the relevant script from my package.json:

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

When I try running $ npm run dev, I get the following error:

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

Obviously, the error has to do with how I'm attempting to include FontAwesome, but I'm new to node, Bootstrap, and FontAwesome, so I'm not quite sure how to proceed. Do I even need to import FontAwesome? Their docs say to simply reference the module's css/all.css, but since the same documentation says to save the FontAwesome module as a development dependency, I'm not sure it will be available when I tell Webpack Encore to compile for production.

Answer 1

Changing my custom.scss file to this (note the last line) fixed the issue:

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

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