Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks

Question

I've the follow example configuration to use mini-css-extract-plugin with Webpack 4:

entry: {
   a: ['./js/a.js', './scss/a.scss'],
   b: ['./js/b.js', './scss/b.scss']
},
module: {
    rules: [
       [...],
       {
        test: /\.(css|sass|scss)$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 2,
                    sourceMap: true
                }
            },
            {
                loader: 'postcss-loader',
                options: {
                    plugins: () => [
                        require('autoprefixer')
                    ],
                    sourceMap: true
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }
        ]
},
optimization: {
    splitChunks: {
        cacheGroups: {
            js: {
                test: /\.js$/,
                name: "commons",
                chunks: "all",
                minChunks: 7,
            },
            css: {
                test: /\.(css|sass|scss)$/,
                name: "commons",
                chunks: "all",
                minChunks: 2,
            }
        }
    }
},
plugins: [
    new MiniCssExtractPlugin({
        filename: "dist/[name].css",
    }),
]

And the following sass files:

// a.scss
@import 'libA.scss';
@import 'libB.css';
[...] 

// b.scss
@import 'libA.scss';
@import 'libB.css';
[...]

When I run webpack libB.css is inserted in in commons.css bundle while libA.scss not.

In general every import of .css file get processed by splitChunks option (only if extension css is specified in the name) while sass import not.

I have a project with multiple sass entry point and many @import of sass component and I'd like to create a common bundle with shared sass modules.

I never worked with mini-css-extract-plugin, but I have worked with ExtractTextPlugin for css, and one thing that might help you is to put the loaders together in order to process your css. ExtractTextPlugin.extract(['css-loader', 'sass-loader']) Could be an idea to follow for your problem. — Italo Borges
– Italo Borges, Commented Mar 21, 2018 at 17:27
I think that mini-css-extract-plug has no method call "extract". In the documentation the loader are written all on the same array like my example (MiniCssExtractPlugin.loader then css-loader, etc...) — Andrea Moraglia
– Andrea Moraglia, Commented Mar 22, 2018 at 10:10
I'm not sure if this is a similar issue, but this post helped me a lot - basically just using the @next version (the rest of my set up was similar to yours) stackoverflow.com/questions/50803260/… — Sia
– Sia, Commented Nov 4, 2019 at 22:05

Ingo Steinke · Accepted Answer · 2021-10-21 08:31:58Z

30

im doing someting like this in my Webpack 4 configuration.

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module: {
rules: [ {
    test: /\.scss$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          modules: true,
          sourceMap: true,
          importLoader: 2
        }
      },
      "sass-loader"
    ]}
  ]
},

plugins: [
  new MiniCssExtractPlugin({
    // Options similar to the same options in webpackOptions.output
    // both options are optional
    filename: "style.css",
    chunkFilename: "[name].css"
  })
]

I also give output.publicPath -configuration object to point into my build dir, example ->

output: {
   filename: "[name]-min.js",
   path: path.resolve(__dirname, "dist"),
   publicPath: "/static/react/dist/"
},

edit If you are interested in code splitting, Webpack 4 can do this "out of the box" for you. This will split .js and as well .css -files for you in case you use dynamic imports.

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

If you other hand would like to merge only your .css into one file you could add as follow.

optimization: {
    splitChunks: {
      chunks: 'all'
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
      }
    },
}

edited Oct 21, 2021 at 8:31

Ingo Steinke

9764 gold badges19 silver badges38 bronze badges

answered Mar 26, 2018 at 10:48

Jimi Pajala

2,37813 silver badges21 bronze badges

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

7 Comments

nass600 Over a year ago

With this config webpack will merge all css in one but also will generate styles.js which is needed in order to make everything working (all the bundled js). Any way to get rid of that file?

llobet Over a year ago

Wrong api schema. cacheGroups goes inside splitChunks.

Jan Peša Over a year ago

@nass600 Use webpack-fix-style-only-entries webpack plugin, works fine.

El Yobo Over a year ago

importLoader should be importLoaders and should probably be 1 not 2 in the initial config example

El Yobo Over a year ago

0 would be no loaders, 1 would be sass... presumably like with the importLoader typo they're also handling too many loaders being specified? See the documented example here if there's confusion - github.com/webpack-contrib/css-loader#importloaders

|

Collectives™ on Stack Overflow

Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related