px2rem-loader

安装

npm i px2rem-loader -D

配置

在 /build/utils.js里添加

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 37.5 //1rem = 37.5px,如果做手机端这个值要与手机屏幕在375时设置的根字体大小一样
  }
}

const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

如图所示：

重启项目即可

注意：这个插件会让项目中所有的文件的 px 都转换为 rem， 如果项目中又有pc端的代码，又有移动端的代码，只想让处理移动端的代码，该怎么办呢

这时候我们可以自定义一个loader，代替px2rem-loader
通过在node_modules里找到px2rem-loader的源码，然后新建一个my-px2rem-loader.js粘贴过去

然后修改，引入px2rem-loader 的地方

在我们自己的loader里加了一句打印，console.log(this.context);，启动项目就会发现文件夹路径被打印出来了：

然后，我们就可以根据路径去匹配想要转换的文件，不想转换的直接导出就行

然后，通过查看，px2rem-loader，引入了两个插件：

我们只需要卸载 px2rem-loader， 并且引入这两个插件，就可以完全替换掉 px2rem-loader 了

npm uni px2rem-loader
npm i loader-utils@1.1.0 px2rem@0.5.0 -D

扩展loader 的一些api:

• this.context：当前处理文件的所在目录，假如当前 Loader 处理的文件是 /src/main.js，则 this.context 就等于 /src。
• this.resource：当前处理文件的完整请求路径，包括 querystring，例如 /src/main.js?name=1。
• this.resourcePath：当前处理文件的路径，例如 /src/main.js。
• this.resourceQuery：当前处理文件的 querystring。
• this.target：等于 Webpack 配置中的 Target。
• this.loadModule：但 Loader 在处理一个文件时，如果依赖其它文件的处理结果才能得出当前文件的结果时， 就可以通过 this.loadModule(request:string,callback:function(err,source,sourceMap,module)) 去获得 request 对应文件的处理结果。
• this.resolve：像 require 语句一样获得指定文件的完整路径，使用方法为 resolve(context:string,request:string,callback:function(err,result:string))。
• this.addDependency：给当前处理文件添加其依赖的文件，以便再其依赖的文件发生变化时，会重新调用 Loader 处理该文件。使用方法为 addDependency(file:string)。
• this.addContextDependency：和 addDependency 类似，但 addContextDependency 是把整个目录加入到当前正在处理文件的依赖中。使用方法为 addContextDependency(directory:string)。
• this.clearDependencies：清除当前正在处理文件的所有依赖，使用方法为 clearDependencies()。
• this.emitFile：输出一个文件，使用方法为 emitFile(name:string,content:Buffer|string,sourceMap:{…})。
  加载程序 API | Loader API

postcss-pxtorem

安装

npm i postcss-pxtorem@5.1.1 -D

配置

在 .postcssrc.js 或 postcss.config.js 中配置

module.exports = {
    'postcss-pxtorem': {
        rootValue: 16, //1rem = 16px
        // rootValue ({ file }) { //根据不同文件设置不同转换大小
	    //     return file.indexOf('vant') !== -1 ? 37.5 : 75
	    // },
        propList: ['*'], //使用通配符 * 启用转换所有属性，假设需要仅对边框进行设置，可以写['*', '!border*']
        exclude: /aaa|bbb/!, //排除转换aaa 或者 bbb文件夹下匹配到的文件
        minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
        mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
    }
}

注意：如果使用此插件不生效可以安装指定版本5.1.1，我在使用时默认node_modules下的px没有被转换，但是网上有人说会准换，可能是版本差异

postcss-px2rem-exclude

安装

npm install postcss-px2rem-exclude -D

配置

在 .postcssrc.js 或 postcss.config.js 中配置

'postcss-px2rem-exclude': { 
    remUnit: 16,
    propList: ['*'],
    exclude: /aaa|bbb/i //排除转换aaa 或者 bbb文件夹下匹配到的文件
}

默认node_modules下的px不会被转换