webpack之Postcss与css模块安装与使用

1：安装相关插件

npm i css-loader style-loader postcss-loader autoprefixer postcss-nested -D

2：webpack.config.js配置

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

3:package.json配置

"browserslist": [
    "> 1%", //应用全球浏览器的使用量大于1%
    "last 2 version" //最新两个版本
  ]

4.新建postcss.config.js,加入

module.exports={
    plugins:[
        require('autoprefixer'), //引入模块自动生成对应浏览器版本
        require('postcss-nested') //css中可以使用less语法
    ]
}

5:css样式

body {
  display: flex;
  background-color: blue;
  .box {
    width: 100px;
    height: 50px;
    background-color: red;
  }
}

6：效果