1

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.