1、安装依赖
npm install -S -D style-resources-loader sass-resources-loader vue-cli-plugin-style-resources-loader
2、配置依赖
在vue.config.js 中
module.exports = { pluginOptions: { "style-resources-loader": { preProcessor: "less", patterns: "./src/assets/css/themes.less" } }, chainWebpack: config => { // 如果你使用的是sass,则此处应该为 // const oneOfsMap = config.module.rule('sass').oneOfs.store // 依此类推,其他的比如stylus等一样用法 const oneOfsMap = config.module.rule('less').oneOfs.store oneOfsMap.forEach(item => { item .use('sass-resources-loader') .loader('sass-resources-loader') .options({ // 这里填入你的样式文件地址 resources: './src/assets/css/themes.less' }) .end() }) } }
3、使用
//src/assets/css/themes.less
@themRed:#C20C0C;
// 任意页面的 <style lang='less' scoped></style>
.app{ color:@themRed}