5. PostCSS

什么是 PostCSS

PostCSS是一个通过JavaScript来转换样式的工具
这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置

命令行使用 postcss

安装： npm install postcss postcss-cli -D

举例一：css前缀

安装autoprefixer： npm install autoprefixer -D

直接使用使用 postcss 工具，并且制定使用 autoprefixer： npx postcss --use autoprefixer -o end.css ./src/css/style.css

转化之后的css样式如下：

postcss-loader

安装： npm install postcss-loader -D

postcss-loader 会去找 postcss

     {test: /\.css$/,use: ["style-loader","css-loader",{loader: "postcss-loader",options: {postcssOptions: {plugins: [require("autoprefixer")],}}}]}

autoprefixer 会添加符合 browserslistrc 规则的浏览器前缀。

单独的postcss配置文件

将 postcss 配置信息放到一个单独的文件中进行管理。

在根目录下创建 postcss.config.js

// webpack.config.js
const path = require('path');module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build")},module: {rules: [{test: /\.css$/, use: ["style-loader", "css-loader","postcss-loader"]}]}
}// postcss 配置单独写在 postcss.config.js
module.exports = {plugins: [require("autoprefixer")]
}

postcss-preset-env

事实上，在配置postcss-loader时，我们配置插件并不需要使用autoprefixer，可以使用另外一个插件：postcss-preset-env。

postcss-preset-env也是一个 postcss 的插件
它可以帮助我们将一些现代的 CSS 特性，转成大多数浏览器认识的 CSS，并且会根据目标浏览器或者运行时环境添加所需的 polyfill，已经内置了autoprefixer。

安装： npm install postcss-preset-env -D

举例：

十六进制的颜色时设置了8位，但是某些浏览器可能不认识这种语法，autoprefixer 是不会转换的。

.content {color: #12345678;
}

5. PostCSS相关推荐

PostCSS原理解析
写在前面的话前端工程化日益成熟今天,我们对于工具越来越深的封装.不管是从vue-cli的3.0版本起,还是umi.bigfish 等前端脚手架,对于webpack都封装在内,对于工程化无疑是高效的, ...
展望未来：使用 PostCSS 和 cssnext 书写 CSS
原文:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像 Twitter,Google,BBC 使用的一样,我打算对 ...
PostCSS理解与运用
1.PostCSS是什么它可以被理解为一个平台,可以让一些插件在上面跑它提供了一个解析器,可以将CSS解析成抽象语法树通过PostCSS这个平台,我们能够开发一些插件,来处理CSS.热门插件如a ...
webpack中loader加载器配置postCss自动添加CSS兼容前缀
配置postCSS自动添加css的兼容前缀前言在这里我使用VScode为编辑器 html文件中 <!DOCTYPE html> <html lang="en" ...
移动vue项目，启动错误：Module build failed: Error: No PostCSS Config found in:
解决办法:在根目录新建postcss.config.js module.exports = {plugins: {'autoprefixer': {browsers: 'last 5 version' ...
配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法
配置 postCSS 自动添加 css 的兼容前缀 ① 运行 npm i postcss-loader autoprefixer -D 命令 ② 在项目根目录中创建 postcss 的配置文件 pos ...
PostCss 从0开始
PostCss 摘自 http://ju.outofmemory.cn/entry/215105 http://www.w3cplus.com/PostCSS/postcss-deep-dive-pr ...
Vue3中遇到问题：PostCSS plugin tailwindcss requires PostCSS 8 解决方案
文章目录遇到问题解决方法参考遇到问题 ERROR Failed to compile with 1 error 4:45:27 PMerror in ./src/assets/tailwind ...
深入浅出的webpack构建工具---PostCss(五)
一:PostCss是什么? PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本 ...
Vue项目启动webpack报错Module build failed: Error: No PostCSS Config found in......
自己写的公司项目,今天需要提交到公司版本库,可是在本地启动正常的项目,拷贝到git文件目录下突然报错Module build failed: Error: No PostCSS Config foun ...

5. PostCSS

5. PostCSS相关推荐

最新文章

热门文章