← All tasks
javascriptwebpack/css-loader #1094Not a task: already works

Invalid example of `webpack.config.js` in README

envgap__webpack__css-loader-1094

01 / FAILURE SIGNATURE

As reported upstream

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
Not a benchmark task.
  • The project already builds and runs before the fix, so there is nothing to repair.

02 / ENVIRONMENT RECIPE

Base commit
22e16e2fc88f920571219570953d3da5702d4fdb
Manifest
package.json
Reproduce
Awaiting issue-specific recipe
Run under trace
Awaiting a meaningful runtime command

03 / ORIGINAL ISSUE TEXT

webpack/css-loader #1094 · read the original issue
<!--

  Issues are so 🔥



  If you remove or skip this template, you'll make the 🐼 sad and the mighty god

  of Github will appear and pile-drive the close button from a great height

  while making animal noises.



  👉🏽 Need support, advice, or help? Don't open an issue!

  Head to StackOverflow or https://gitter.im/webpack/webpack.

-->



## Documentation Is:



<!-- Please place an x (no spaces!) in all [ ] that apply -->



- [ ] Missing

- [ ] Needed

- [x] Confusing

- [ ] Not Sure?



## Please Explain in Detail...



I found the webpack config example in [`README.md`](https://github.com/webpack-contrib/css-loader/blame/master/README.md#L1080-L1126) about line 1080 contains some abuses that can cause webpack reports an error:



```

Uncaught:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

 - configuration.module.rules[0].use[3] has an unknown property 'test'. These properties are valid:

   object { ident?, loader?, options? }

```



### Your Proposal for Changes



#### [`README.md#L1080`](https://github.com/webpack-contrib/css-loader/blame/master/README.md#L1108-L1113)



```diff

  **webpack.config.js**



  ```js

  module.exports = {

    module: {

      rules: [

        {

          // For CSS modules

          // For pure CSS - /\.css$/i,

          // For Sass/SCSS - /\.((c|sa|sc)ss)$/i,

          // For Less - /\.((c|le)ss)$/i,

          test: /\.((c|sa|sc)ss)$/i,

          use: [

            'style-loader',

            {

              loader: 'css-loader',

              options: {

                // Run `postcss-loader` on each CSS `@import`, do not forget that `sass-loader` compile non CSS `@import`'s into a single file

                // If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`

                importLoaders: 1,

                // Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.

                modules: { auto: true },

              },

            },

            {

              loader: 'postcss-loader',

              options: { plugins: () => [postcssPresetEnv({ stage: 0 })] },

            },

            // Can be `less-loader`

            // The `test` property should be `\.less/i`

            {

-             test: /\.s[ac]ss$/i,

+             // This `test` key is invalid in Rule#UseEntry, recommend to

+             // delete this line and comment together with `For CSS modules...` above

+             // test: /\.s[ac]ss$/i,

              loader: 'sass-loader',

            },

          ],

        },

        ...

```
Continue on GitHub ↗

04 / LABELS

Labels from the report text only; not yet run

No supported category has been assigned.

Label rules and the text that matched
[]