Webpack5实战笔记----7.postcss工作流程

postcss是什么？

利用javascript转换样式的工具

 postcss安装命令：

npm i postcss -D

 postcss-cil安装命令：

npm i postcss-cli -D

 上手运行：

在css目录下 新建文件test.css,内容如下：

.title {
    /* 测试，利用postcss对下面的样式做兼容性处理 */
    display: grid;
    transition: all .5s;
    user-select: none;
}

在login.js中导入：

import '../css/test.css'

 在node中使用postcss命令进行处理：

//将test.css通过postcss兼容性处理后的代码保存在根目录的ret.css下

npx postcss -o ret.css ./src/css/test.css

 处理结果是生成了ret.css文件，但是文件并没有变化，原因是并没有安装加兼容性前缀的插件

接下来需要安装加兼容性前缀的插件：安装命令

npm i autoprefixer -D

然后使用命令

npx postcss --use autoprefixer -o ret.css ./src/css/test.css

运行结果是前缀添加成功！

总结：postcss 利用javascript转换css让其兼容

           autoprefixer 加前缀的插件