美文网首页vue集锦VUE技术与项目
vue cli3.0全局less配置篇

vue cli3.0全局less配置篇

作者: 幸运三片叶 | 来源:发表于2019-08-12 10:03 被阅读7次

在用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

相关文章

  • Vue Cli3.0 全局引入 less 变量

    Vue Cli3.0 全局引入 less 变量 首先定义一个全局 less 样式文件,eg: global.les...

  • vue cli3.0全局less配置篇

    在用vue搭建框架的时候我们都会使用less,sass编译器,但我们有时候会编写很多全局变量但是需要在每个需要该变...

  • js -- vue-cli添加less全局配置

    vue-cli添加less全局配置 项目老是引入css变量好麻烦, 加入全局配置就方便多了。 代码如下: 修改文件...

  • Vue项目搭建

    一、环境搭建 二、引入依赖包 在vue中引入外部less文件vue 使用less全局变量 三、启动项目 四、配置项...

  • vue 全局less sess变量

    vue 全局less sess变量 1.安装 2.配置 sass-resources-loader文档

  • vue-cli3 配置全局less 、sass 变量

    一、配置全局less变量第一步执行vue add style-resources-loader vue add p...

  • Vue Cli3.0 全局引入 less 变量

    我们开发过程中经常会使用很多 less 变量,但是 vue 文件中想使用 less 变量,就需要挨个引入,极其麻烦...

  • vue 插件配置

    配置环境 : vue-cl4 01style-resources-loader 全局调用less 在项目根目录下的...

  • vue cli3.0配置全局变量

    首先我们在配置文件里肯定会用到process.env.NODE_ENV,这个对象我们在全局都可以访问到,那么假如说...

  • Vue CLI3.0+Flexible

    文章主要记录内容: Vue CLI3.0环境搭建过程 Vue目录结构及其配置 component组件注册和使用 V...

网友评论

    本文标题:vue cli3.0全局less配置篇

    本文链接:https://www.haomeiwen.com/subject/fzcyjctx.html