vue-cli3全局引入less变量

安装插件

先安装 css 预处理插件 less, less-loader, 然后安装 style-resources-loader ， 再安装 vue-cli-plugin-style-resources-loader。vue 项目中需要 安装 这四个插件。

使用

1.目录

2. vue.config.js 配置

// vue.config.js
const path = require('path')
module.exports = {
    chainWebpack: config=> {
        config.module.rule('less').oneOf('vue').use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                path.resolve(__dirname, './src/assets/common.less'),
            ],
        })
    },
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
}

3. 使用

<style scoped lang="less">
  .main {
    color: @mainColor;
  }
</style>

========================================================================

css中变量的提取和使用  以及  style中引入css样式

<style scoped lang="less">
@import "./mixins.less";
@tradeColor1: #86e3ce;
.trade-time-label-item-1() {
  color: @tradeColor1;
  border: 1px solid rgba(134, 227, 206, 0.53);
  background-color: rgba(134, 227, 206, 0.1);
}
.trade-time-label-item-active-1() {
  color: #fff;
  border: 1px solid @tradeColor1;
  background-color: @tradeColor1;
}
</style>