less在vue项目中的全局变量设置

1，使用全局变量的目的：

• sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果

2，安装sass-resources-loader

npm install sass-resources-loader --save-dev

3，找到build文件夹下面的utils.js

return {
    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')
  }

4，安装style-resources-loader vue-cli-plugin-style-resources-loader

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

5，配置 vue.config.js

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