Mixing global CSS & CSS modules

[BenMorel]

I'd like to use CSS modules by default for all my SCSS code, but disable it for Bootstrap SCSS files.

Right now I have this setup:

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

It works fine, but if I import Bootstrap SCSS files in my project:

require('bootstrap/scss/bootstrap.scss');

It gets compiled to something like:

.container-fluid_14FwU { ... }
.row_12USl { ... }

i.e. Bootstrap gets modularized, instead of being considered global by default.

There have been extensive discussions about how to tackle this problem. A few suggestions seem to stand out of the crowd:

• only use CSS modules for files ending with .module.css or .module.scss
• use CSS modules for all project CSS/SCSS files, and don't use them for files in node_modules
• configure the loader to use CSS modules or not by default, and allow overriding on import by using a suffix such as file.css?global or file.css?module

Is there a way to configure either of these behaviours with webpack-encore right now, and is one of them officially recommended?

The various suggestions in the above thread seem hard to implement with Encore at the moment, and I'd like to avoid having to configure webpack manually if I can.

[Lyrkan]

Hi @BenMorel,

configure the loader to use CSS modules or not by default, and allow overriding on import by using a suffix such as file.css?global or file.css?module

Encore should actually already support this by default using ?module:

https://github.com/symfony/webpack-encore/blob/5640271a87e63048b8ae261d210922b4972cab69/lib/config-generator.js#L262-L274

[BenMorel]

@Lyrkan Indeed this works out of the box, thanks a lot! 🥇

I guess this is the recommended way to use CSS modules with webpack-encore then; is this documented anywhere?

[Lyrkan]

is this documented anywhere?

I dont think it is... when we added support for that in #508 it was mainly for Vue.js users since it was the documented way to opt-in for CSS modules: https://vue-loader.vuejs.org/guide/css-modules.html#opt-in-usage (using <style module> for instance).

There is a really small mention of it there: https://symfony.com/doc/current/frontend/encore/vuejs.html#using-scoped-styles

But maybe it deserves a better exposure for non-Vue.js projects.

[BenMorel]

But maybe it deserves a better exposure for non-Vue.js projects

Definitely, this is a killer feature that a lot of projects would benefit from, I guess. I'm personally using it to style React components.

Should I leave this issue open, until the docs are updated?

[Lyrkan]

Should I leave this issue open, until the docs are updated?

👍

[rmaury]

Hi, not sure if it can help, but I had some similar issue (?module not working with Jest) and fixed it with something like that (with Webpack Encore) :

.configureCssLoader(options => { options.modules = { auto: /.module.\w+$/i }}) And now you can create a file with '.module.scss' suffix, and you can import it in a ts file.

Hope that's work and help

[dcp-dev]

Hi, not sure if it can help, but I had some similar issue (?module not working with Jest) and fixed it with something like that (with Webpack Encore) :

.configureCssLoader(options => { options.modules = { auto: /.module.\w+$/i }}) And now you can create a file with '.module.scss' suffix, and you can import it in a ts file.

Hope that's work and help

I was close to broke my computer before finding your answer. Thanks by a lot

[rmaury]

Yeaaah, I'm glad I could help someone with that. That was a lot of pain/despair for me too !

[bscutt]

Yeaaah, I'm glad I could help someone with that. That was a lot of pain/despair for me too !

Just come across this 2 years later - saved me an awful lot of head scratching - thank you!

[rmaury]

Yeaaah, I'm glad I could help someone with that. That was a lot of pain/despair for me too !

Just come across this 2 years later - saved me an awful lot of head scratching - thank you!

Glad this helped !