ETP can't works with oneOf configuration in webpack?

[kimown]

Hi, thanks ETP and your guys work, it helps me a lot in my daily work.

I am try to combine css modules and postcss, here is solution I found, the configuration like this
css-modules/css-modules#65 (comment), use oneOf
and querystring ?raw to distinct local scope css file and global scope css file.
So my webpack.config.js is this:

{
        test: /\.css$/,
        // https://github.com/css-modules/css-modules/pull/65#issuecomment-355078216
        oneOf: [{
          resourceQuery: /^\?raw$/,
          use: ExtractTextPlugin.extract([
            // 'style-loader',
            'css-loader',
            'postcss-loader'
          ])
        }, {
          use: ExtractTextPlugin.extract([
            // 'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                localIdentName: '[path][name]__[local]--[hash:base64:5]',
                importLoaders: 1
              }
            },
            // https://webpack.js.org/loaders/postcss-loader/#src/components/Sidebar/Sidebar.jsx
            'postcss-loader'
          ])
        }]
      }

Here is an reproduce example:

demo.zip

unzip demo.zip -d demo
cd demo
npm i // seems a lot of node_modules...
npm run build

then console print errors,

ERROR in ./src/index.css
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

I searched issue, seems oneOf already have a solution #483 (comment)

did I made a mistake about configuration?

[alexander-akait]

@kimown problem still exists?

[kimown]

@evilebottnawi
yes, you can test demo.zip I have uploade
d in my issue description.

[alexander-akait]

@kimown Thanks!

[marmelin]

@kimown Hi, see here for my solution to this.

Hope it helps.

[Jeevan-Kishore]

I wanted to import global css to my app, to do so.. (trying things out for a couple of hours, this worked for me.)

{
            test: /\.css$/,
            oneOf: [
              {
                resourceQuery: /^\?raw$/,
                use: ExtractTextPlugin.extract(
                  Object.assign(
                    {
                      fallback: {
                        loader: require.resolve('style-loader'),
                        options: {
                          hmr: false,
                        },
                      },
                      use: [
                        {
                          loader: require.resolve('css-loader'),
                          options: {
                            importLoaders: 1,
                            modules: false,
                            minimize: true,
                            sourceMap: shouldUseSourceMap,
                          },
                        },
                        {
                          loader: require.resolve('postcss-loader'),
                          options: {
                            // Necessary for external CSS imports to work
                            // https://github.com/facebookincubator/create-react-app/issues/2677
                            ident: 'postcss',
                            plugins: () => [
                              require('postcss-flexbugs-fixes'),
                              autoprefixer({
                                browsers: [
                                  '>1%',
                                  'last 4 versions',
                                  'Firefox ESR',
                                  'not ie < 9', // React doesn't support IE8 anyway
                                ],
                                flexbox: 'no-2009',
                              }),
                            ],
                          },
                        },
                      ],
                    },
                    extractTextPluginOptions
                  )
                ),
              },
              {
                use: ExtractTextPlugin.extract(
                  Object.assign(
                    {
                      fallback: {
                        loader: require.resolve('style-loader'),
                        options: {
                          hmr: false,
                        },
                      },
                      use: [
                        {
                          loader: require.resolve('css-loader'),
                          options: {
                            importLoaders: 1,
                            modules: true,
                            localIdentName: "[name]__[local]___[hash:base64:5]",
                            minimize: true,
                            sourceMap: shouldUseSourceMap,
                          },
                        },
                        {
                          loader: require.resolve('postcss-loader'),
                          options: {
                            // Necessary for external CSS imports to work
                            // https://github.com/facebookincubator/create-react-app/issues/2677
                            ident: 'postcss',
                            plugins: () => [
                              require('postcss-flexbugs-fixes'),
                              autoprefixer({
                                browsers: [
                                  '>1%',
                                  'last 4 versions',
                                  'Firefox ESR',
                                  'not ie < 9', // React doesn't support IE8 anyway
                                ],
                                flexbox: 'no-2009',
                              }),
                            ],
                          },
                        },
                      ],
                    },
                    extractTextPluginOptions
                  )
                ),
              }]
            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
          }

[alexander-akait]

DEPRECATED
Please use: https://github.com/webpack-contrib/mini-css-extract-plugin