CODEWITHSUNDEEP
csswebpacksass
erol_smsr
erol_smsr

Reputation: 1496

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

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.

Upvotes: 1

Views: 2928

Answers (1)

tmhao2005
tmhao2005

Reputation: 17524

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";

Upvotes: 4

Related Questions