解决vue使用less全局变量

  在vue中,可以通过以下方法,解决既可以在组件中使用全局变量,也可以在less文件中使用全局变量

1.定义一个存放变量的less文件

2.安装style-resources-loader

vue add style-resources-loader

3.在vue.config.js中,把变量的less文件配置进去

const path = require('path') // 这个是需要的

module.exports = {
  pluginOptions: {
    // 添加下面这段。src/style/globalValue.less为存放变量的路径+文件
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, "src/style/globalValue.less")]
    }
  }
}

如果需要更多自定义和添加其他预编译的配置,可以参考该文档:https://cli.vuejs.org/zh/guide/css.html#%E8%87%AA%E5%8A%A8%E5%8C%96%E5%AF%BC%E5%85%A5