CSS Modules no longer work

[tmalley99]

Hey guys!

Just updated encore to latest version and noticed that VueLoader css modules no longer are being generated (raw classnames are being generated instead and $style.className no longer returns appropriate class)...

Was there something changed that broke CSS modules or is this an error?

Thanks!

[weaverryan]

Hey @Chesskingt!

Thanks for the report! Yes and no :). We did upgrade to Webpack 4 internally, and there could be some bug related to that, or you may be using a version of vue-loader (what version of vue, vue-loader and vue-template-compiler are in your project) that's not playing nicely.

Could you post your exact code and the expected output? We could turn that into a test case and find out easily if there is a bug or not.

Cheers!

[tmalley99]

Sorry for delay, here's the specs (still an issue)

"axios": "^0.18.0", "bootstrap": "^4.2.1", "node-sass": "^4.11.0", "sass-loader": "^7.1.0", "v-tooltip": "^2.0.0-rc.33", "vue": "^2.5.21", "vue-loader": "^15.5.1", "vue-spinner": "^1.0.3", "vue-template-compiler": "^2.5.21"

[tmalley99]

https://gist.github.com/Chesskingt/f90188ff46c24c4981dee58904138796 <-- there's the component.

[Lyrkan]

Hi @Chesskingt,

Did you enable CSS modules using configureCssLoader()?

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

[tmalley99]

hi! Before, that worked right in Vue. Now, doing that works, BUT, there's an issue where ALL my css is now modualized. I use twig and Bootstrap so modularizing everything isn't an option. What ever happened to the basic vue-loader support for CSS modules within encore?

[Lyrkan]

Well, it seems that it now requires a more advanced config: https://vue-loader.vuejs.org/guide/css-modules.html#opt-in-usage

We may be able to add that to the /\.css$/ rule generated by Encore (see here and here) but we'll have to check if it doesn't break anything else first...

[epcliff]

Hi! I have a similar issue. I added configureCssLoader and it's no longer empty but my tailwind css have been changed. Is there any other configuration I need to do?

[Lyrkan]

Hi @epcliff,

It's probably the same issue.

As I noted in my previous comment using "standard" CSS and CSS modules at the same time requires a more advanced configuration... which isn't easy to achieve in the current version of Encore (you would have to remove the default CSS loader and add the config given on Vue's website...)

I tried something in #508 that should help with that.