Split Common SASS styles in to one css chunk in React instead of duplicated CSS

user_5136044 0
Viewed 347

In CRA React App, I have a common style guide in SCSS which is imported in module level scss files using @use, using dart SASS as well.

I have changed the references from @import to @use and was expecting Webpack will handle as common code, will create a separate chunk

Problem

How to make one common chunk for a common style guide.

Screenshots

enter image description here

enter image description here

webpack reactjs sass optimization css
2 Answers

This can be achieved by Extract Text Plugin, which...

Extracts text from a bundle, or bundles, into a separate file. For more check this.

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

module.exports = {
  entry: {
    foo: path.resolve(__dirname, "src/foo"),
    bar: path.resolve(__dirname, "src/bar"),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        fooStyles: {
          type: "css/mini-extract",
          name: "styles_foo",
          chunks: (chunk) => {
            return chunk.name === "foo";
          },
          enforce: true,
        },
        barStyles: {
          type: "css/mini-extract",
          name: "styles_bar",
          chunks: (chunk) => {
            return chunk.name === "bar";
          },
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
}

Though, I'm not sure if you're looking for the above one or another plug-in called CommonsChunkPlugin, which acts similar.

The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points.

Example:

new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  // or
  names: ['app', 'subPageA'],
  // the name or list of names must match the name or names
  // of the entry points that create the async chunks

  children: true,  // use all children of the chunk
  async: true,
  minChunks: 3,  // 3 children must share the module before it's separated
})
user_95269470

I'm seeing src in your images, which tells me that those screen captures you took is in development, not production.

In development webpack should use style-loader and directly load all styles and inject it into the DOM using style tags to speed up development. So seeing multiple files is normal in development.

In production webpack should use something like mini-css-extract-plugin and compile all your sass to a single css file.

The only way to get multiple css files in webpack for production is to create multiple entries for each file.

Admin1
Related