vue-cli4中使用less、postcss-pxtorem、postcss-px-to-viewport方法和坑

前言

许多前端小伙伴多多少少都会自己搞个vue项目来玩，或者出于业务需要自己搭建一个vue项目。

以下纪录我使用vue-cli4版本搭建项目时踩过的一些坑。供大家参考也给自己做个笔记。

大纲

1. less
   1. 使用less
   2. 在vue-cli4中使用less的坑
2. postcss-pxtorem
   1. 使用postcss-pxtorem
   2. 在vue-cli4中使用postcss-pxtorem的坑
3. postcss-px-to-viewport
   1. 使用postcss-px-to-viewport

less

使用less

我们只需要安装less相关依赖即可

npm install less less-loader@6.0.0 --save-dev

在vue-cli4中使用less的坑

在上面的安装命令中，使用的是less-loader@6.0.0版本的loader，目前最新版 10.2.0 的 less-loader在vue-cli中会报下面的异常

Syntax Error: TypeError: this.getOptions is not a function

所以我们把less-loader的版本降到6.0.0即可。

postcss-pxtorem

使用postcss-pxtorem

1. 安装依赖

npm install amfe-flexible postcss-pxtorem@5.1.1 --save-dev

amfe-flexible来根据屏幕动态改变根元素font-size，postcss-pxtorem把代码中px转为rem。

2. 在main.js中引用amfe-flexible

import 'amfe-flexible'

3. 在vue-config.js中声明插件

在项目根目录建vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("autoprefixer")({
            // 配置使用 autoprefixer
            overrideBrowserslist: ["last 15 versions"] 
          }),
          require("postcss-pxtorem")({
            rootValue: 75, // 换算的基数
            // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
            // 如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
            selectorBlackList: ["ig"],
            propList: ["*"],
            exclude: /node_modules/
          })
        ]
      }
    }
  }
};

在vue-cli4中使用postcss-pxtorem的坑

上面的安装命令中，使用的是postcss-pxtorem@5.1.1版本，目前最新版本6.0.0会报一下错误：

Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

我们把版本降到5.1.1即可。

postcss-px-to-viewport

在vue-cli4中使用postcss-px-to-viewport

1. 安装依赖

npm install postcss-px-to-viewport --save

2. 在vue-config.js中声明插件

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px",  // 需要转换的单位，默认为"px"
            viewportWidth: 750,  // 视窗的宽度，对应移动端设计稿的宽度，一般是375
            unitPrecision: 3,     // 单位转换后保留的精度
            propList: [       // 能转化为vw的属性列表
             "*"
            ],
            viewportUnit: "vw",       // 希望使用的视口单位
            fontViewportUnit: "vw",       // 字体使用的视口单位
            selectorBlackList: [],    // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
            minPixelValue: 1,     // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
            mediaQuery: false,        // 媒体查询里的单位是否需要转换单位
            replace: true,        // 是否直接更换属性值，而不添加备用属性
            exclude: /(\/|\\)(node_modules)(\/|\\)/,      // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
           })
        ]
      }
    }
  }
};