Import Sass variables into Javascript with Webpack Encore 1.7.x

I just ran compose recipes:update on symfony/webpack-encore-bundle which made me move from @symfony/webpack-encore 0.30.x to 1.7.x.

I have a problem with exported SASS variables when trying to import them in JS.

In assets/styles/config/variables.scss I have:

// ...
$iframe-background-color: $color-lighter;

:export {
  // ...
  iframeBackgroundColor: $iframe-background-color;
}

And in assets/somefile.js:

import styles from './styles/config/variables.scss';

export default () => {
  console.log(styles.iframeBackgroundColor);
}

When I try to run yarn dev , I get the following message.

warn in ./assets/somefile.js
11:46:09 AM

export 'default' (imported as 'styles') was not found in '../styles/config/variables.scss' (module has no exports)

This is my webpack.config.js:

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

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

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .addEntry('app', './assets/app.js')
    .addEntry('login', './assets/login.js')
    .addEntry('catalog', './assets/catalog.js')
    .addEntry('project-favorite', './assets/project-favorite.js')
    .addStyleEntry('email', './assets/styles/email.scss')

    .enableStimulusBridge('./assets/controllers.json')

    .splitEntryChunks()
    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    .configureBabelPresetEnv((config) => {
      config.useBuiltIns = 'usage';
      config.corejs      = 3;
    })

    .enableSassLoader()
    .enablePostCssLoader()

    .copyFiles({
      from: './assets/images',
      to: Encore.isProduction()
          ? 'images/[path][name].[hash:8].[ext]'
          : 'images/[path][name].[ext]',
    })
;

module.exports = Encore.getWebpackConfig();

I tried to add this to my Webpack config, and it then compiles without warnings, however, the style is completely broken.

.configureCssLoader((config) => {
  config.modules = true;
})

Does anyone know how to do that with Webpack encore 1.7.x?

It took me forever to find a suitable solution for my problem, but it was actually quite simple.

I couldn't use the following, since Bootstrap was then exploding.

Encore.configureCssLoader(options => {
  options.modules = true;
});

However, I found out that I could use the ?module suffix on my filename to make Webpack import it as a module.

So the only change I had to make is in assets/someFile.js and it goes like this.

import styles from './styles/config/variables.scss?module';

export default () => {
  console.log(styles.iframeBackgroundColor);
}

I would've preferred a global config, maybe with a test that looks like this:

test: /\.module\.(css|scss|sass)$/

But I can live with it for now.