浅谈PostCSS

1. 背景

• css的预处置惩罚器语言（比如 sass， less， stylus）的扩展性不好，你可以使用它们已有的功能，但假如想做扩展就没那么容易。
  
• sass是很常用的css预处置惩罚器语言，在webpack中要使用它，需要安装sass-loader，而sass-loader又依赖于node-sass。各人知道node-sass很庞大，安装极其迟钝，常常安装失败。而且node-sass各版本对于node版本有严格限制，常常造成为了安装某个node-sass版本而升级node版本的问题（在当地这没有问题，但在服务器上升级node可能连累很大）。
  
• vue项目，都安装了postcss（因为它是vue-loader的依赖项）。我们没须要再安装其它工具处置惩罚css。
  

2. 什么是PostCSS？

• 它是一个js库，能够将css转换成js。
  
• 它将css转换成AST语法树（体现为js对象），然后借助各种plugins对转化后的js对象举行操作，终极转化回css。
  
• 所以说postcss是不会影响css的，只有安装和配置plugin之后，才会影响css。
  
• postcss可以看作是css的babel。
  

3. 怎样在vue项目中使用和配置PostCSS？

3.1 webpack中怎样使用PostCSS

使用webpack的vue项目，都会安装vue-loader（它是一个webpack的loader，用来将vue sfc组件转换成js模块）。而vue-loader正是借助postcss实现scoped css的，因此安装了vue-loader就默认安装了postcss。固然默认它并不包含我们需要的特性，因此我们就要安装插件并配置。
关于安装何种插件，我们会在背面介绍几种常用的插件。
vue-loader可以主动加载以下3种postcss的配置文件

• postcss.config.js
  
• .postcssrc
  
• package.json 中的postcss字段
  

这里我们主要介绍第一种postcss.config.js，其格式如下
   留意： 需要先安装插件

1. module.exports = {
2.     plugins: [
3.         ['postcss-import', { path: ['src/css/'] }],
4.         'postcss-mixins',
5.         'postcss-nested',
6.         'postcss-color-mod-function',
7.         ['postcss-cssnext', {
8.             warnForDuplicates: false,
9.         }],
10.         ['cssnano', {
11.             sourcemap: false,
12.             autoprefixer: false,
13.             safe: true,
14.             discardComments: {
15.                 removeAll: true,
16.             },
17.             discardUnused: false,
18.             zindex: false,
19.         }]
20.     ]
21. };

复制代码

对postcss的配置，可以查阅 GitHub - webpack-contrib/postcss-loader: PostCSS loader for webpack
3.2 rollup中怎样使用PostCSS

rollup需要引入rollup-plugin-postcss，并在rollup.config.js配置postcss，样例如下
rollup-plugin-postcss的配置，拜见官方文档

1. // rollup.config.js
2. import postcss from 'rollup-plugin-postcss'
4. export default {
5.   plugins: [
6.     postcss({
7.       plugins: []
8.     })
9.   ]
10. }

复制代码

4. 常用PostCSS插件

postcss-import4.1 postcss-import：允许从其它 css 文件引入css。

   留意：这个插件一般需要放在插件列表的第一位，如许才气保证其它的插件工作正常。
  方式：

• 引入时，指定路径，则从路径下查找
  

1. @import '../css/styles.css';

复制代码

• 配置中指定 path， 并直接引入文件名，此时会从path查找
  

1. // postcss.config.js
2. ['postcss-import', { path: ['src/css/'] }] // 在postcss.config.js中，指定path

复制代码

1. // 在文件中引入
2. @import 'styles.css'; // 会加载src/css/styles.css

复制代码

4.2 : 允许mixin

   留意： 假如和postcss-simple-vars或者postcss-nested同用，此插件必须放在postcss-simple-vars或者postcss-nested之前
  4.3 ：允许像scss那样定义变量

1. $dir:    top;
2. $blue:   #056ef0;
3. $column: 200px;
5. .menu_link {
6.   background: $blue;
7.   width: $column;
8. }
9. .menu {
10.   width: calc(4 * $column);
11.   margin-$(dir): 10px;
12. }

复制代码

4.4 ：允许誊写嵌套语法

1. // postcss.config.js
2. module.exports = {
3.     plugins: [
4.         ['postcss-import', { path: ['src/css/'] }],
5.         'postcss-nested'
6.     ]
7. };

复制代码

4.5 ：用来压缩css

4.6 ：在老旧欣赏器上使用新的或者将来的css特性

该插件包含丰富的可选功能，可查看文档选择。这里主要用其控制自定义变量（custom variables），所以介绍怎样配置以支持custom variables。

1. // 配置
2. module.exports = {
3.     plugins: [
4.         ['postcss-import', { path: ['src/css/'] }],
5.         ['postcss-preset-env', {
6.             stage: 2,
7.             // preserve 决定所有的插件是否接受preserve属性（保留（true）或者忽略（false）其它polyfilled css（css的兜底方案）），
8.             // 这里preserve: false很关键，否则，自定义变量不起效
9.             preserve: false,
10.             // feature详情可查看https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md
11.             // 它里面有每个特性的文档和样例
12.             features: {
13.                 'custom-selectors': true, // 自定义选择器
14.                 'custom-properties': true, // 自定义变量
15.             },
16.             // importFrom 用来指定从哪里导入各类变量（比如 Custom Media, Custom Properties, Custom Selectors, Environment Variables）
17.             // 如果只引入单个文件，可以不用数组
18.             importFrom: ['./src/css/colorDef.css']
19.         }]
20.     ]
21. };

复制代码

引入变量时，不需要使用@import

1. <style lang="postcss" scoped>
2.   /* 变量--color-danger 是在 'src/css/colorDef.css'文件定义的， 但不用导入css文件 */
3.   .about {
4.     .about-details {
5.       color: var(--color-danger);
6.       width: 100px;
7.     }
8.   }
9. </style>

复制代码

postcss-preset-env 可以配置多个特性，见特性列表。
4.7 postcss-px-to-viewport

rem响应式布局的缺陷：必须通过js来动态控制根元素font-size的大小。
postcss-px-to-viewport 的配置项

1. {
2.     unitToConvert: "px", // 要转化的单位
3.     viewportWidth: 3024, // UI设计稿的宽度
4.     unitPrecision: 2, // 转换后的精度，即小数点位数
5.     propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
6.     viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
7.     fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
8.     // selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
9.     minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
10.     // mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
11.     replace: true, // 是否转换后直接更换属性值
12.     // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
13.     landscape: false // 是否处理横屏情况
14. }

复制代码

5. 团队介绍

「三翼鸟数字化技术平台-ToC服务平台」以用户运动数据为基础，利用保举引擎为用户提供“千人千面”的个性化保举服务，改善用户体验，持续提升核心业务指标。通过构建高效、智能的线上运营系统，全面整合数据资产，实现数据分析-人群圈选-用户触达-后效分析-策略优化的运营闭环，并提供可视化报表，一站式操作提升数字化运营服从。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。