vue+less使用全局变量

1、新建全局样式文件common.less,并自定义变量。

2、安装插件npm install sass-resources-loader --save-dev，

然后找到build文件夹下面的utils.js修改less

    css: generateLoaders(),
    postcss: generateLoaders(),
    // less: generateLoaders('less'),
    less: generateLoaders('less').concat({ 
        loader: 'sass-resources-loader', 
        options: { 
          // 全局变量文件路径, index.less就是你全局less文件 
          resources: path.resolve(__dirname, '../src/assets/less/index.less') 
        } 
    }),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

安装插件npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

配置 vue.config.js

    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                // 这个是加上自己的路径，
                // 注意：不能使用别名路径
                path.resolve(__dirname, './assets/less/index.less')
            ]
        }
    }
}

注意：修改完文件配置后需要重新启动npm start，否则可能不生效

3、文件中引用全局变量，最后就可以用啦。