Webpack Encore - Module rules - Error when export/import scss variables into javascript

Question

I try to import scss/css variables into javascript. I stumbled upon this blog post which uses the :export block .

I npm install ed the sass-loader and node-sass just to make sure I have them. Now when I use :export i get an error telling me that sass isn't valid CSS:

$theme-colors: ( 
  "primary": #bc2a0a,
  "secondary": #4B5C74,
  ...
);

:export {
  colorPalette: $theme-colors // Error occurs because of using sass variable
}

Module build failed: ("primary": #bc2a0a, "secondary": #4B5C74, ...) isn't a valid CSS value.

I'm pretty sure this is because of the module rules which I don't know how to apply. My current webpack.config.js looks like this:

let Encore = require('@symfony/webpack-encore');
let webpack = require('webpack');
const path = require('path');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .addEntry('vendors', [
        'react',
        'react-dom',
        'extend',
        'prop-types',
        'jquery',
        'ApiRouter',
        'translator',
        'moment',
        'moment-timezone',
        './vendor/boewa/glyphicons/src/css/glyphicons.css'
    ])

    .addEntry('app', [
        './assets/js/main.js',
        './assets/css/app.scss',
    ])

    .enableSassLoader()
    .enableReactPreset()

    // Some plugins
    .addPlugin(...).addPlugin(...)

    .autoProvidejQuery()

    .configureFilenames({
        images: '[path][name].[ext]',
    })
;

let config = Encore.getWebpackConfig();
config.resolve.alias = {
    'ApiRouter': 'Common/Networking/ApiRouter.js',
    'translator': 'Common/Translator.js'
};
config.resolve.modules = [
    path.resolve('./assets/js'),
    path.resolve('./node_modules')
];

module.exports = config;

So how can I get the :export to work so that I can use sass/css variables in javascript?

Answer 1

You need to install CSS Modules as a dependency in your project and enable it in your webpack config .

Here is an example