vu-cli+ less全局变量

133 阅读1分钟

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}