Webpack-encore: Empty object when importing css

[luxferoo]

Hi, I want to import a css file "css-modules way" but when I do this I got an empty object.

import test from './test.scss' // test == {}

[Lyrkan]

Hi @luxferoo,

Could you try this?

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

[luxferoo]

@Lyrkan Hello my friend, Encore.configureCssLoader is not a recognized property or method

[Lyrkan]

Oh, my bad I just noticed that it hasn't been released yet (added in #335), for some reason I thought it was way older than that.

So... currently there is no "easy" way to do it.
You can still modify the generated Webpack config object though, doing something like this should work:

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

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

// Retrieve the config object
const config = Encore.getWebpackConfig();

// Set "modules" option of the css-loader
for (const rule of config.module.rules) {
    if (rule.use) {
        for (const ruleUse of rule.use) {
            if (ruleUse.loader === 'css-loader') {
                ruleUse.options.modules = true;
            }
        }
    }
}

// Export the config (don't call getWebpackConfig() again)
module.exports = config;

[luxferoo]

@Lyrkan thanks buddy !