vue中使用自定义的公共less文件

项目环境：vue 2.9.6 + webpack + iview

为了更加方便的管理和维护css,决定在项目中使用Less，并创建一个公共的less文件,但是在引用时出现了一系列的问题，其中尝试了下面两种引入方式：
1、在入口js文件中import
2、在入口的vue文件的style中@import，style不加scope;
在这过程中也出现了很多问题，不过也都一一解决了，但是遗憾的是，这两种方式引入之后并没有起到任何效果（在vue文件中的样式无法用混合(Mixins)的方式使用公共less中的类）,于是在网上有查找并尝试了另一种方式，最终完美解决，请参考下面的步骤；
3、使用下面的方式配置好后，我又发现了一个问题：在less文件中通过@import导入另外的less文件后出现报错，经过多番研究，终于发现了解决方法，请移步至下面地址；

如果操作过程中，出现报错情况，请移步 https://blog.csdn.net/qq_40652539/article/details/93398864 ,希望可以解决你的报错问题。

1、安装依赖包

通过如下命令，安装相关依赖包：
npm install sass-resources-loader --save-dev

2、修改相关配置文件

找到目录结构中的build/utils.js文件，在exports.cssLoaders模块中添加函数：

 新添加的函数/
function lessResourceLoader() {
        var loaders = [
          cssLoader,
          'less-loader',
          {
            loader: 'sass-resources-loader',	// 这里必须是sass-resources-loader,如果写成less-resources-loader在启动时会报错
            options: {
              resources: [
                path.resolve(__dirname, '../src/assets/custom_public_var.less'),	// 这里的路径为自定义的Less文件的相对路径
                path.resolve(__dirname, `../src/project_${process.env.ENTRY}/styles/index.less`),	// 这种方式为动态解析各自项目下的公共less文件
              ]
            }
          }
        ];
        if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
    }
    //
    
      // generate loader string to be used with extract text plugin
    function generateLoaders(loader, loaderOptions) {
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

        if (loader) {
            loaders.push({
                loader: loader + '-loader',
                options: Object.assign({}, loaderOptions, {
                    sourceMap: options.sourceMap
                })
            })
        }

        // Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }
    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less:  lessResourceLoader(), //这里的lessResourceLoader就是上面的方法
       // less:  generateLoaders('less'),		// 将原来的注释掉
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
    }

上面代码中，lessResourceLoader()为新添加的函数，../src/assets/custom_public_var.less为自定义的Less文件的相对路径，然后将return{...}中的less: generateLoaders('less')替换为less: lessResourceLoader();

3、重新编译运行项目

修改完成后执行：npm run dev重新运行项目即可。

sass 也可尝试这中方法，把less-loader改为sass-loader即可；本人没有尝试