How to disable css modules for one file in webpack

Question

I need to disable css modules only for one file.

Please explain how can I do it

I have two webpack files

Please help to configurate my webpack.config.dev.js and webpack.config.prod.js files.

I installed css modules with tutorial https://medium.com/nulogy/how-to-use-css-modules-with-create-react-app-9e44bec2b5c2.

My webpack config is bellow:

dev

 test: /\.css$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: "[name]__[local]___[hash:base64:5]"
            },
          },

prod

test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          Object.assign(
            {
              fallback: require.resolve('style-loader'),
              use: [
                {
                  loader: require.resolve('css-loader'),
                  options: {
                    importLoaders: 1,
                    modules: true,
                    minimize: true,
                    sourceMap: true,
                  },
                },

path for my file is 'react-infinite-calendar/styles.css'.

How to add exception?

Thank you in advance!

Answer 1

Use exclude option:

// ...
test: /\.css$/,
exclude: /yor_file\.css$/,
// ...