03_webpack-postcss

 

认识PostCSS工具

什么是PostCSS？

　　postCSS是一个通过JavaScript来转换样式的工具；
　　这个工具可用帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置；
　　但是实现这些功能，我们需要借助于postCSS对应的插件

如何使用PostCSS呢？

　　一：查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader

　　二：添加你需要的postCSS相关的插件

 

命令行使用postcss

当我们在命令行使用的时候需要安装一个工具postcss-cli(command line interface 命令行接口);
npm i postcss postcss-cli -D

运行
npx postcss -o ./src/css/test.css
你会发现帮我们生成的css文件并没有加前缀，为什么？因为postcss提供的功能原本就非常少，需要依赖他的插件来完成一些工作

autoprefixer插件

为了给样式添加前缀，需要再安装autoprefixer插件
npm i autoprefixer -D

最后再命令行中指定你要使用的插件
npx postcss --use autoprefixer -o result.css ./src/css/test.css
　　--use 告诉postcss我需要使用什么插件
　　-o指定输出和输入文件

测试css需要加哪些前缀：Autoprefixer CSS online我们可以在该网站中查询一些添加css属性的样式

 

集成在webpack中

需要安装：postcss-loader

npm i postcs-loader -D

只下载postcss-loader是不行的，因为对css加前缀还需要用到一些插件如：autoprefixer

{
        // 该规则使用正则表达式
        test: /\.css$/, //匹配规则
        use: [
          "style-loader",
          "css-loader",
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                // 可能会依赖多个插件，所以就是数组
                plugins: [
                  require('autoprefixer')
                ]
              }
            }
          }
        ]
      },

 

但是在实际项目中配置autoprefixer插件是非常少的，它会去配置另外一个插件：postcss-reset-env

postcss-preset-env

他可以帮我们转换现代的css特性，转换成大部分浏览器都识别的css

如：color：#12345678 通常这里写的是十六进制，一般是写6位的，但是有些浏览器能识别到8位，最后两位等同于rgb a,可是对于其他浏览器他是不支持8位的

这个时候我们就希望postcss工具转换成大部分浏览器识别的样式

autoprefixer只负责加浏览器前缀，至于css转化他会处理
postcss-preset-env也已经包含了autoprefixer的特性，所以不用再对他进行引入了

安装postcss-preset-env

npm i postcss-preset-env -D

配置postcss-preset-env

 {
        // 该规则使用正则表达式
        test: /\.css$/, //匹配规则
        use: [
          "style-loader",
          "css-loader",
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                // 可能会依赖多个插件，所以就是数组
                plugins: [
                  // require('postcss-preset-env')
                  'postcss-preset-env'//这种是上面的简写形式，它会根据这个字符串直接对这个插件进行引入
                  // 并不是所有的插件都可以使用简写的，比如有些插件在调用的时候，本身需要给他传入一些参数
                  // 如 require('abc')({})
                ]
              }
            }
          }
        ]
      },

那么我对less的处理也需要这个loader和插件，我也要给写一份postcss-loader，这样子太繁琐了，我们对他这些配置进行抽离

在全局中，创建一个文件 postcss.config.js（名字是固定的不能乱写）

postcss.config.js

module.exports = {
  plugins: [
    //require('postcss-preset-env')
　　//上面形式的简写，但不是所有插件都可以简写
　　"postcss-preset-env"

  ]
}

 {
        // 该规则使用正则表达式
        test: /\.css$/, //匹配规则
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      }

 

对于postcss-preset-env的注意点

假如我在入口文件引入了a.css文件又在a.css文件中使用@import 引入了b.css文件

那么这个b.css文件将不会被转化(加前缀，适配浏览器能识别的css)

为什么会产生这个问题？
postcss-preset-env对我们的文件是怎么进行处理的
首先加载入口文件，匹配到了一个css资源(a.css)，先使用postcss对a.css的代码进行处理，之后又来到css-loader，css-loader发现你使用@import又引用了b.css,因为@import是css语法，所以css-loader会对他进行加载和处理，最后再通过style-loader进行处理

所以b.css只被css-loader和style-loader进行处理了，因为css-loader可以对b.css进行处理，所以不会再回头使用postcss-loader再对他进行处理，所以就造成这么一个问题

那么怎么解决这个问题？

{
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              //相对于，当你解析到@import之后的话，再回头使用前面的几个loaders再进行处理一次
              // 0 :当你解析文件的时候发现了@import语句只会被当前loader处理，不会被前面的loader处理
              // 1 :当解析到@import语句的时候，使用前一个loader再处理一次
              // 这里需要填你需要被前面几个loader进行处理
              // 2：当我发现@import的是less文件的时候，再使用前面两个loader处理一次
              importLoaders: 2
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      }