webpack-autoconf icon indicating copy to clipboard operation
webpack-autoconf copied to clipboard

Refactor PostCSS + CSS Modules

Open lucasjs opened this issue 6 years ago • 2 comments

The config now is huge and confuse:

      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          'postcss-loader'
        ],
        exclude: /\.module\.css$/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true
            }
          },
          'postcss-loader'
        ],
        include: /\.module\.css$/
      }

I made some changes and we can have the same goal with this and also, delete the postcss.config.js file:

      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                require('autoprefixer')
              ]
            }
          }
        ]
      }

If you agree, I can make some changes and create a Pull Request! :)

lucasjs avatar Oct 05 '19 00:10 lucasjs

You have selected CSS Modules, Post CSS and CSS. The config is not that complex when only selecting CSS Modules and Post CSS:

image

One problem is that CSS is autoselected when clicking PostCSS even though CSS Modules is selected, which can lead to confusion. A fix is to not autoselect in that case.

jakoblind avatar Oct 11 '19 07:10 jakoblind

@jakoblind I could fix that! And what about remove the postcss.config.js file?

lucasjs avatar Oct 12 '19 18:10 lucasjs