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.

Possible duplicate of [Exclude some css files in webpack](https://stackoverflow.com/questions/55297105/exclude-some-css-files-in-webpack) — EGC, Oct 09 '19 at 00:30
@DerekLawrence I tried, please check updated version of question — user996142, Oct 09 '19 at 01:14
Whats the reasoning for excluding this css file when foo uses this? It seems that something inside their requires that file when the loader is loading it. — Derek Lawrence, Oct 09 '19 at 16:28
@Derek Lawrence this file is not mine, it is one of external dependencies, and it contains code that I don't need — user996142, Oct 09 '19 at 18:21

score 1 · Answer 1 · answered Oct 10 '19 at 15:23

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']
            },
        ],
    },
};

trying to do the same but replacing scss files but its not working. — Mahi, Nov 02 '21 at 06:53

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

1 Answers1