How to exclude certain .CSS file from output in Webpack:?

Question

foo.js
foo.css
bar.css

foo.js includes foo.css.
And foo.css includes bar.css.

As result, I have bundle with bar.css. I want to exclude it. I am also using MiniCssExtractPlugin since I nee to separate css and js files.

What I already tried:

IgnorePlugin. It removes bar, but then MiniCssExtractPlugin fails because of it.
null-loader for bar.css ( I tried both test with regexp and include/exclude). It simply doesn't work (it could be that I miss something.
Two oneOf rules for /\.css$/: for with null-loader and another with everything else.

Nothing works.

What is the correct way to achieve it?

My webpack.config.js

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

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({ }),
    new webpack.IgnorePlugin(/bar\.css$/)
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
        ],
      },
    ],
  },
};

And the output

ERROR in ./src/foo.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: Cannot find module '-!../node_modules/css-loader/dist/cjs.js!./bar.css'

It seems that MiniCssExtractPlugin uses css-loader explicitly, so I can't skip module loading with configuration.

@DerekLawrence I tried, please check updated version of question — user996142
– user996142, Commented Oct 9, 2019 at 1:14

user996142 · Accepted Answer · 2019-10-10 15:23:30Z

1

Solution is to use NormalModuleReplacementPlugin to replace bad file with empty one

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

const pluginToIgnore = /bad_css\.css$/;
module.exports = {
    plugins: [
        new MiniCssExtractPlugin({}),
        new webpack.NormalModuleReplacementPlugin(
            pluginToIgnore,
            '!./empty.css'
        )
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
        ],
    },
};

answered Oct 10, 2019 at 15:23

user996142

2,9233 gold badges32 silver badges53 bronze badges

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

1 Comment

Manzer A Over a year ago

trying to do the same but replacing scss files but its not working.

Collectives™ on Stack Overflow

How to exclude certain .CSS file from output in Webpack:?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related