mini-css-extract-plugin with sass-loader doesn't output a CSS file

Question

I'm using Webpack to bundle my React + Typescript app and want to use SASS for styling. I was able to add SASS compilation and inclusion of styles by using the sass-loader, css-loader and style-loader like this:

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

However, I now want to add the mini-css-extract-plugin to extract the compiled CSS to a separate file, but I can't get it to work:

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

I'm not getting any errors, but I don't see any file by the name of main.css being created. How do I get this to work?

asset bundle.js 274 KiB [emitted] [minimized] [big] (name: main) 1 
related asset
asset main.css 107 bytes [emitted] (name: main)
Entrypoint main [big] 274 KiB = main.css 107 bytes bundle.js 274 KiB
runtime modules 1000 bytes 5 modules
orphan modules 769 bytes [orphan] 4 modules
cacheable modules 468 KiB
  modules by path ./node_modules/webpack-dev-server/ 21.2 KiB 12 modules
  modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
  modules by path ./node_modules/react/ 6.48 KiB 2 modules
  modules by path ./node_modules/react-dom/ 119 KiB 2 modules
  modules by path ./node_modules/webpack/hot/*.js 1.42 KiB 2 modules
  modules by path ./node_modules/scheduler/ 4.91 KiB
    ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
    ./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB         
[built] [code generated]
./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes             [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Style/Main.scss 106 bytes [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  bundle.js (274 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (274 KiB)
      main.css
      bundle.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.11.0 compiled with 3 warnings in 7223 ms
ℹ ｢wdm｣: Compiled with warnings.

Yes, here's the repo in its minimal form with all changes in the develop branch: github.com/Commercify/react-webshop-uitkit — erol_smsr
– erol_smsr, Commented Jan 7, 2021 at 23:41

tmhao2005 · Accepted Answer · 2021-01-08 02:32:48Z

4

The problem is you missed to include your main css file into your webpack entry point so no css files found.

As long as you import your main css file, then it would work:

index.tsx

import "./Style/Main.scss";

answered Jan 8, 2021 at 2:32

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

erol_smsr Over a year ago

I just did that, still the same problem. I added the Webpack CLI output to my question, maybe you can see the problem there because I see the main.css file being mentioned.

tmhao2005 Over a year ago

You meant you didn't see the main.css file in generated or something else?

erol_smsr Over a year ago

Ahh I now realise I'm using the Webpack dev server, so the files aren't visible on my machine's filesystem, but they can be included in the project and used. Seems like the problem is fixed, thanks

Collectives™ on Stack Overflow

mini-css-extract-plugin with sass-loader doesn't output a CSS file

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related