Postcss-loader and mini-css-extract-plugin package conflict

The postCSS-Loader simply means that some features of CSS3 work even in earlier browsers, automatically adding prefixes

This is postCSS-Loader’s masterpieceThe source code

<style lang="stylus" scoped>
  .home{
    width 100%
    height 200px
    background #ff9900
    display flex
    justify-content space-between
    padding 20px    
    .wb{
      color #fff
      font-size 20px
    }
  }
</style> 
Copy the code

How to use PostcsS-Loader

1. The first installation

yarn add postcss-loader -D
Copy the code

Check to see if the package.json file is installed

2. Webpack. Config. Js configuration

When postcss-Loader is used with mini-css-extract-plugin, it is important to configure the postcss-Loader compatibility range and autopreFixer plug-in * *

The following error is reported if packaging is not configuredLoader configuration is as follows

module: {
    rules: [{test: /\.(css|stylus)$/,
        use: [
          MiniCssExtractPlugin.loader,        
          'css-loader',                  
          {
            loader:'postcss-loader'./ / with MiniCssExtractPlugin. Loader when used together to add using range
            options: {plugins: [require('autoprefixer') ({overrideBrowserslist: ['last 5 version'.'> 1%'.'ios 7']})]}},'stylus-loader'].exclude:/node_modules/,
        include: [path.resolve(__dirname, 'src')]},]}Copy the code

3. Run the preview to see how it looks

yarn server
Copy the code

After successful operation

Finally the browser input address view

http://localhost:8080/home/index

Project source repository github

Link: github.com/1761364313/… .

Postcss-loader and mini-css-extract-plugin package conflict