vue 配置less全局变量

总结下配置less全局变量踩过的坑

1、使用npm安装less

npm install less --save

2、安装less-loader 注意使用高版本run serve会有问题 这里使用的7.x版本

npm install less-loader@7.x --save-dev

3、安装style-resources-loader 和 vue-cli-plugin-style-resources-loader

npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

4、在vue.config.js文件中配置 如果没有此文件在根目录创建一个即可

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 全局less变量存储路径
        path.resolve(__dirname, './src/assets/css/base.less'),
      ]
    }
  }
}

注意目录配置方式./src/assets/css/base.less 修改你全局less文件所在的位置 目录不可使用简写方式 例如@/assets方式

5、使用方式 注：不需要在任何地方导入less文件就可以使用了

<style lang="less" scoped>
  .info-contaner {
    background-color: @color-high-text;
    height: 90px;
    width: 100%;
  }
</style>

style标签必须指令lang="less" 、@color-high-text就是你所定义的全局变量了