浅谈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的配置文件

  1. postcss.config.js

  2. .postcssrc

  3. package.json 中的postcss字段

这里我们主要介绍第一种postcss.config.js,其格式如下

注意: 需要先安装插件

module.exports = {
    plugins: [
        ['postcss-import', { path: ['src/css/'] }],
        'postcss-mixins',
        'postcss-nested',
        'postcss-color-mod-function',
        ['postcss-cssnext', {
            warnForDuplicates: false,
        }],
        ['cssnano', {
            sourcemap: false,
            autoprefixer: false,
            safe: true,
            discardComments: {
                removeAll: true,
            },
            discardUnused: false,
            zindex: false,
        }]
    ]
};

对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的配置,参见官方文档

// rollup.config.js
import postcss from 'rollup-plugin-postcss'

export default {
  plugins: [
    postcss({
      plugins: []
    })
  ]
}

4. 常用PostCSS插件

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

注意:这个插件一般需要放在插件列表的第一位,这样才能保证其它的插件工作正常。

方式:

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

@import '../css/styles.css';
  • 配置中指定 path, 并直接引入文件名,此时会从path查找

// postcss.config.js
['postcss-import', { path: ['src/css/'] }] // 在postcss.config.js中,指定path
// 在文件中引入
@import 'styles.css'; // 会加载src/css/styles.css

4.2 : 允许mixin

注意: 如果和postcss-simple-vars或者postcss-nested同用,此插件必须放在postcss-simple-vars或者postcss-nested之前

4.3 :允许像scss那样定义变量

$dir:    top;
$blue:   #056ef0;
$column: 200px;

.menu_link {
  background: $blue;
  width: $column;
}
.menu {
  width: calc(4 * $column);
  margin-$(dir): 10px;
}

4.4 :允许书写嵌套语法

// postcss.config.js
module.exports = {
    plugins: [
        ['postcss-import', { path: ['src/css/'] }],
        'postcss-nested'
    ]
};

4.5 :用来压缩css

4.6 :在老旧浏览器上使用新的或者未来的css特性

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

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

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

postcss-preset-env 可以配置多个特性,见特性列表

4.7 postcss-px-to-viewport

rem响应式布局的缺陷:必须通过js来动态控制根元素font-size的大小。

postcss-px-to-viewport 的配置项

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

5. 团队介绍

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

你可能感兴趣的:(前端,效能提升,postcss,前端,javascript)