Webpack Encore Zurb Foundation-sites compilation error

Question

I am trying to use Foundation-sites in a Symfony 4 application together with Webpack Encore. When trying to compile the scss files I am getting the following error:

./node_modules/.bin/encore dev
Running webpack ...

 ERROR  Failed to compile with 1 errors                                                                                                   6:42:54 AM

 error  in ./assets/css/app.css

CssSyntaxError

(10:3) Unclosed bracket

   8 |      for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
   9 |  }
> 10 | })(window, function(__WEBPACK_EXTERNAL_MODULE_jquery__) {
     |   ^
  11 | return /******/ (function(modules) { // webpackBootstrap
  12 | /******/     // The module cache
    at <anonymous>


 @ ./assets/js/app.js 9:0-24

My configuration is as follows:

webpack.config.js

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

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')

    .addEntry('app', './assets/js/app.js')

    .splitEntryChunks()

    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    .enableSassLoader(function (options) {
        options.sassOptions.includePaths = [
            '/vendor/zurb/foundation/scss'
        ];
        options.sassOptions.resolveUrlLoader= true;
    })


    .autoProvidejQuery()


;

module.exports = Encore.getWebpackConfig();

package.json

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.30.0",
        "core-js": "^3.0.0",
        "node-sass": "^4.14.1",
        "regenerator-runtime": "^0.13.2",
        "sass-loader": "^8.0.2",
        "sass": "^1.26.5",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "foundation-sites": "^6.6.3",
        "jquery": "^3.5.1"
    }
}

app.css

@import "~foundation-sites";

body {
    background-color: lightgray;
}

Answer 1

The import in app.css is wrong.

By default it imports the Js and the error says “hey, you can’t import js code into css”.

So the correct import is:

 @import "~foundation-sites/dist/css/foundation.css";

Or the min file:

@import "~foundation-sites/dist/css/foundation.min.css";