PostCSS

介绍

PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。比如可以使用 Autoprefixer 插件自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮我们自动的为 CSS 规则添加前缀，将最新的 CSS 语法转换成大多数浏览器都能理解的语法。

CSS 模块能让你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。

观看链接：https://www.bilibili.com/video/BV1YU4y1g745?p=67&vd_source=49db724ed7e6514baf9d0a397bdb1e4c

使用

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 mode: 'development',
 entry: './src/app.js',
 pugins: [
  new HtmlWebpackPlugin().
 ],

 module: {
  rules: [
   {
    test: '/\.css$/',
    use:[
     'style-loader',
     //此配置是开启模块了，也就是每个css文件都是一个模块
     {
      loader:'css-loader',
      options: {
       modules: true
      }
     },
     'postcss-loader'
    ]
   }
  ]
 }
}

在这里解释一下:package.json 文件夹中 'browserslist': [ '> 1%',//应用在全球浏览器的使用量大于 1% 'last 2 versions'//浏览器最新的两个版本 ]

npm install -D style-loader css-loader postcss-loader postcss

可以使用  autoprefixer  插件为 CSS 规则添加前缀

npm i --save-dev autoprefixer

可以使用  postcss-nested  插件为 CSS 提供编写嵌套的样式语法支持

npm i -D postcss-nested

在项目的根目录下传创建一个 postcss.config.js

module.exports = {
  plugins: [require("autoprefixer"), require("postcss-nested")],
};