vue-cli3 如何全局引入less变量

当有一个可在全局使用的公共less变量文件
variable.less
如何写才能一次性在所有.vue文件中引入这个文件?

我尝试了几种方法
1:安装style-resources-loader
然后配置

const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/assets/style/variable.less")]
    }
  }
};

使用后 没有任何效果
测试了 ./src @/src ~@/src 依然没有任何效果

2:在main.js中引入variable.less

这样确实可以获取到variable.less中的样式 但是变量拿不到
提示:

Variable @BG is undefined

我设置的变量是 BG 提示找不到这个变量
图片描述
图片描述
图片描述

3:使用 下面 冯恒智 建议的方法
图片描述
图片描述
改写成less 结果无效
4:使用 globalVars
目前唯一成功的方法
图片描述

但是感觉这样需要每次去vue.config.js里面去维护 有点不方法 有没有更好的办法

不知道如何写才能引入less的公共变量文件,
想要的效果是 在所有.vue文件里面 不用重复写 引入公共变量less文件
如果有知道怎么做的,麻烦指点一下 谢谢

阅读 18k
10 个回答

我之前也遇到这个问题,你可能需要安装一个包就能使用变量
yarn add vue-cli-plugin-style-resources-loader

今天刚好也需要配置全局引入less变量, 发现跟楼主一样的报错,开始以为是路径或者名字写错了,一直报错,代码跟上面的几位同行说的没错。
后来想重新安装一下style-resources-loader插件吧(第一次是使用npm i style-resources-loader -D),我是使用vue-cli3安装插件的方法就可以了。

vue add style-resources-loader

会自动安装好vue-cli-plugin-style-resources-loader的,一切没问题。
这样会自动生成如下代码:

pluginOptions: {
  'style-resources-loader': {
    preProcessor: 'less',
            patterns: []
  }
}

往里面配置路径,发现可以了

patterns: [path.resolve(__dirname, './src/assets/css/common.less') ]

要在style里面@import

新手上路,请多包涵

第一种方法在vue.cunfig.js中配置
const path = require("path");
module.exports = {
pluginOptions: {

'style-resources-loader': {
  preProcessor: 'less',
  patterns: path.resolve(__dirname, './src/common/less/variable.less')
}

}
}
测试没有报错

这样配,亲测有效

// vue.config.js
const path = require('path')
module.exports = {
    chainWebpack: config=> {
        config.module.rule('less').oneOf('vue').use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                path.resolve(__dirname, './src/assets/common.less'),
            ],
        })
    },
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
}

修改vue.config.js文件

module.exports = {
  ...
  // 全局less变量
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "src/styles/global.less")]
    }
  }
};

src/styles/目录下global.less 文件

//common style
...
@color-blue:#2874C2;
@color-red:#FB0D1C;
@color-orange:#FF6C00;
@color-gray:#909090;
...

修改后重新编译
npm run serve or npm run dev


跟楼主第一个方法一样,但是亲测有效,从项目中copy过来的。

和楼主一样的问题,试了上述方法,都不行,编译的时候一直都报less的变量undefined(组件中使用less的全局变量)

然后第二天重新试了一下~用vue create一个新项目中,依次安装less/less-loader/style-resources-loader/vue-cli-plugin-style-resources-loader

npm install less less-loader@5.0.0 --save-dev
npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

然后配置vue.config.js

const path = require('path')
module.exports = {
    pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/styles/全局less样式以及@变量.less")]
    }
  }
}

直接npm run serve

然后就好了~就好了~我勒个去~

唯一的问题是less-loader版本过高会报getOption异常,固定装个版本即可~
npm install less less-loader@5.0.0 --save-dev

在此记录下该问题
Mark一下

@vue/cli 4.5.13
less ^4.1.2
less-loader ^5.0.0
vue-cli-plugin-style-resources-loader ^0.1.5
style-resources-loader ^1.5.0

之前也试了vue add style-resources-loader;完了安装不成功,还一堆报错~算了~这个方法有风险,删了node_modules包重新来过...

是否安装 vue-cli-plugin-style-resources-loader 是有区别的:

1.安装了 vue-cli-plugin-style-resources-loader 则需要配置在

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'preProcessor': 'stylus',
      'patterns': [
        path.resolve(__dirname, './src/styles/abstracts/*.styl'),
      ]
    }
  }
}

2.没有安装 vue-cli-plugin-style-resources-loader,则配置如下:

vue.config.js:

module.exports = {
  // 安装:style-resources-loader
  chainWebpack: (config) => {
    const oneOfsMap = config.module.rule("less").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          // 这里的路径不能使用 @ 符号,否则会报错
          // patterns: ["./src/assets/reset1.less", "./src/assets/reset2.less"]
          patterns: "./src/assets/reset.less"
        })
        .end()
    })
  }
};

webpack.config.js:

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader', {
                loader: 'style-resources-loader',
                options: {
                    patterns: [
                        './path/from/context/to/scss/variables/*.scss',
                        './path/from/context/to/scss/mixins/*.scss',
                    ]
                }
            }]
        }]
    },
    // ...
}

详见:
1.https://www.npmjs.com/package/style-resources-loader
2.https://www.npmjs.com/package/vue-cli-plugin-style-resources-...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题