VUE CLI3 less 全局变量引用

本文主要是介绍VUE CLI3 less 全局变量引用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先展示两个在网上广为流传的方法，我用了没有效果。。。当然估计很多人还是可以成功了

方法一

1、添加依赖   style-resources-loader

2、vue.config.js中添加

module.exports = {pluginOptions: {'style-resources-loader': {preProcessor: 'less',patterns: [],},},
};

3、添加全局less引入

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

4、加入path

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

 

 

方法二

const path = require('path')module.exports = {chainWebpack: config => {const types = ['vue-modules', 'vue', 'normal-modules', 'normal']types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))},css: {loaderOptions: {less: {javascriptEnabled: true}}}
}function addStyleResource(rule) {rule.use('style-resource').loader('style-resources-loader').options({patterns: [path.resolve(__dirname, 'src/styles/variable.less'), // 需要全局导入的less],})
}

 

 

 

方法三

module.exports = {css: {loaderOptions: {less: {globalVars: {primary: '#fff'}}}}
}

 

以上我均尝试了。。。。依然不能在组件中引入less文件中的全局变量

等待解决方案中。。。。

这篇关于VUE CLI3 less 全局变量引用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---