2021最新webpack5: postcss工作流程

P9 09-postcss工作流程

postcss 是什么

是一个javascript的用来转换css的工作，可以区别一下 sass/less 等工具产品

相关包

# 正常的 postcss 包
npm i -D postcss

# 想以命令行方式运行，就安装这个工具
npm i -D postcss-cli

cli命令的使用

用于测试，更好的理解原理。

# 只有输入/输出
postcss -o result.css ./src/main.css
# 添加插件了
postcss --use autoprefixer -o result.css ./src/main.css

原文件 main.css

在当前目录下添加 .browerslistrc

安装相关的包：

npm i -D postcss postcss-cli autoprefixer

.title {
  color: red;
  user-select: none;
  transition: all 0.3s;
}

生成文件 result.css

.title {
  color: red;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: all 0.3s;
}

参考

https://autoprefixer.github.io/