postcss支持vue/less/css/sass文件

2024年5月27日 103次阅读 来源: 陶留军

使用vue-webpack初始化的构建环境，想要让px2rem同时支持.vue和.less文件的px转换的正确、优雅的配置是如何的？

vue-webpack的默认配置下，如果安装了postcss-loader和postcss-px2rem，那么.vue文件中样式部分的px会转换成rem。

为了让它也支持.less/.css文件中的px转rem，大家通常是在build/utils.js的generateLoaders函数中修改一段代码如下：

var loaders = [cssLoader];

loaders.push({
    loader: 'postcss-loader',
    options: Object.assign({}, loaderOptions, {
      sourceMap: options.sourceMap
    })
});

这样，的确已经让.less/.css等文件转换px为rem了。但显然，现在要进入本文章的主题，同学们在.vue的样式部分写一段代码：

borer: 1px solid #ddd;/*no*/

你会惊奇的发现，1px被转换成了rem，如果你不知道/*no*/的作用，说明本文对你没有作用。

这种现象的原因是，.vue文件的处理器是vue-loader，它本身已经实现了postcss-loader的加载，所以能自动转换.vue文件里的px单位。但因为在utils.js里又引入了一次postcss-loader，那么.vue文件的处理器最后变成了style,postcss,css,postcss,less(省略了-loader)，而css处理器会删除注释，所以导致/*no*/被删除后，又被postcss-loader处理了一次。

原因知道了，对应的解决方法，大家各显神通吧。下面是我的解决代码：

build/utils.js:

var loaders = [cssLoader];

if (options.postcss) {
  loaders.push({
    loader: 'postcss-loader',
    options: Object.assign({}, loaderOptions, {
      sourceMap: options.sourceMap
    })
  });
}

build/webpack.dev.conf.js、build/webpack.prod.conf.js 中 utils.styleLoaders 额外增加参数postcss:true，例如：

utils.styleLoaders({ 
    sourceMap: config.dev.cssSourceMap, 
    postcss: true 
})
    原文作者：陶留军
    原文地址: https://segmentfault.com/a/1190000014709527
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞