原文链接：https://blog.csdn.net/weixin_43417444/article/details/103348769
第一步：安装less
cnpm install less less-loader --save
接下来找到bulid目录下的webpack.base.conf.js并打开，加上这句话（其实不加也可以）
module: {
rules: [
...
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
...
]
},
第二步：安装px2rem-loader lib-flexible sass-resources-loader
cnpm install px2rem-loader lib-flexible sass-resources-loader --save
在main.js里 import 'lib-flexible/flexible.js'
之后，在build文件夹下打开utils.js文件 先找到cssLoaders方法
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUint: 75
}
}
将上述代码添加到下图位置（这一步实现px自动转成rem）
image.png
然后再复制下面的代码 添加进去(这一步实现公共less文件只引入一次)
function lessResourceLoader() {
var loaders = [
cssLoader,
px2remLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/index.less'),
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
注：path.resolve(__dirname, ‘…/src/assets/index.less’)为自己对应的文件路径，不用在main.js引入
…/src/assets/index.less 就是公共less文件，不用在每个vue文件都引入一次就可以直接使用index.less里的变量
复制上面的代码，然后将return 改写
return {
css: generateLoaders(),
postcss: generateLoaders(),
// less: generateLoaders('less'),
less: lessResourceLoader(), // 看 在这里
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
最后重启（别忘了重启）
在vue组件里可以直接写成px单位
px2remLoader 会自动转成rem
