欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-13 12:46:37
...

项目环境:vue 2.9.6 + webpack + iview

为了更加方便的管理和维护css,决定在项目中使用Less,并创建一个公共的less文件,但是在引用时出现了一系列的问题,其中尝试了下面两种引入方式:
1、在入口js文件中import
2、在入口的vue文件的style中@import,style不加scope;
在这过程中也出现了很多问题,不过也都一一解决了,但是遗憾的是,这两种方式引入之后并没有起到任何效果,于是在网上有查找并尝试了另一种方式,最终完美解决,如下:

如果操作过程中,出现报错情况,请移步 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: 'less-resources-loader',
            options: {
              resources: [
                path.resolve(__dirname, '../src/assets/custom_public_var.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即可;本人没有尝试