How to compile CSS to their own file in Phoenix with Webpack?

Phoenix Forum Questions / Help
, ,
1

Hello,
When I’m in development mode, webpack puts all the CSS in a javascript file and injects it in <head> using a <style> tag.
This is fine during development, but in production it comes with the downside where my HTML page “flickers” unstyled (the JS is loaded at the end of the page load) for a brief moment, which is annoying.

I know for sure that webpack can compile the CSS to their own file when deploying (did it once), but I can’t figure out if Phoenix has already a configuration prepared for that or it’s on me.
Currently, it doesn’t look like, it seems like it keeps injecting, but my project has been created a while ago, so the config might be outdated.

2 Likes
2
2 Likes
3

Thanks.
Looks like Phoenix does it for normal css files, but not for SCSS!
I updated the config and it does the trick with mini css extract plugin :wink:

1 Like
4

Could you post the relevant parts of your webpack.config.js? TIA

5

This should do

      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ]
      },

But You need to add node-sass and sass-loader to your packages.

3 Likes