I'm trying to exclude "swiper.min.css" to be excluded from processing as camelCase in my react webpack config but it keeps failing on other .css file when I do it like this.
I have tried many different options but each of them seems to lead nowhere :-(
I have tried with ternary operator, I have tried excluding based on wildcard etc - same result - it fails on all other .css files with this error:
"ERROR in ./src/pages/TimeTable/components/TimeTableLegend.module.css 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders"
Any suggestion or pointers please?
var path = require('path');
var webpack = require('webpack');
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.min.js"
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
exclude: /swiper\.min\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
mode: (resourcePath) => {
if (/common.css$/i.test(resourcePath)) {
return 'global'
}
return 'local'
},
localIdentName: '[name]__[local]__[hash:base64:4]',
exportLocalsConvention: 'camelCase',
},
},
},
{
loader: 'postcss-loader',
},
],
test: /swiper\.min\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
mode: (resourcePath) => {
if (/common.css$/i.test(resourcePath)) {
return 'global'
}
return 'local'
},
localIdentName: '[local]',
exportLocalsConvention: 'asIs',
},
},
},
{
loader: 'postcss-loader',
},
],
}
]
},
};