foo.js
foo.css
bar.css
foo.js contains foo.css.
Also, foo.css includes bar.css.
After bundling, I end up with bar.css which I want to exclude. I am using MiniCssExtractPlugin to separate css and js files.
Methods I have attempted:
IgnorePlugin. It successfully removesbar.css, but thenMiniCssExtractPluginfails due to it.null-loaderforbar.css(tried usingtestwith regexp and include/exclude). Unfortunately, it did not work as expected (maybe something was missed).- Two different rules within
oneOffor/\.css$/: one withnull-loaderand the other for everything else.
Despite these attempts, none were successful.
What is the correct approach to resolve this issue?
My configuration in 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',
],
},
],
},
};
Here's the error 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 appears that MiniCssExtractPlugin explicitly utilizes css-loader, making it challenging to skip module loading through configuration.