vue cli3.0全局less配置篇

在用vue搭建框架的时候我们都会使用less,sass编译器，但我们有时候会编写很多全局变量但是需要在每个需要该变量的文件去引入该文件，非常麻烦且不方便，这时候就需要配置全局环境的less变量

安装

cnpm/npm i 
style-resources-loader 
vue-cli-plugin-style-resources-loader  
less  
less-loader -S

创建less文件(图1是我项目中配置的文件)

图1

vue.config.js文件中的配置

pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                path.resolve(__dirname, './src/assets/less/enter.less')
            ]
        }
    }

上述配置完了就可以正常使用less文件里面定义的变量了，但是还有个问题 --- 图片路径问题（在实际业务中经常会有多倍图的需要,我们写一个图片应用的时候就会有很长的一段代码,这个时候我们会想到用less配置全局图片转化函数，如图2）

图2

但当我们想把该图片路径放在当前引用该图片变量的路径下的img文件夹的时候发现该文件路径不存在的错误,其实这样配置只能将所有的图片资源放在src下面的assets文件夹下的img文件夹，并不能达到图3下的img文件夹下

图3

问题解决

• 其实只要简单改下之前写的代码就行
• 只要将其中的url("@{imgUrl}@{imgName}@2x.@{type}")改为这样就行~"url(@{imgUrl}@{imgName}@2x.@{type})"
  • 需要在第一个url前添加~ 之后的用""包裹着
  • ~"url(@{imgUrl}@{imgName}@2x.@{type})"中 @{imgUrl}@{imgName}@2x.@{type}外不需要用"包裹，像这样background-image: ~"url('@{imgUrl}@{imgName}@2x.@{type}')"是错误的

.imgRoot(@imgName, @type: png) {
  background-image: ~"url(@{imgUrl}@{imgName}@2x.@{type})";
  background-image: image-set(~"url(@{imgUrl}@{imgName}@2x.@{type})" 2x, 
                              ~"url(@{imgUrl}@{imgName}@3x.@{type})" 3x);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

• 注意: 下面这段别忘了在你引用的文件头部添加下
  @imgUrl: './img/'; // 默认背景图片位置

资源下载

项目运用到全局less文件，主要用于移动端的ren适配和flex布局，如果有需要的可下载 提取码：vdb8