vue引入全局less实现全局变量的控制

最新推荐文章于 2024-04-17 16:13:33 发布

aら　淼

最新推荐文章于 2024-04-17 16:13:33 发布

阅读量936

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/geniusxyt/article/details/112966750

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

本文介绍了在Vue项目中使用Less设置全局样式变量的好处，包括统一风格和减少重复工作。详细阐述了在vue-cli2和vue-cli3/4环境下如何配置全局样式变量，涉及vue.config.js的修改和sass-resources-loader的使用。同时，对比了vue-cli2与vue-cli3/4的区别，并提供了项目配置的不同方法。

摘要由CSDN通过智能技术生成

1.设置全局样式变量的好处：

方便页面样式、风格尽量统一，便于多人合作开发
方便统一管理
减少重复工作

2.以less为例（sass等同原理）

安装 sass-resources-loader 依赖：

cnpm install sass-resources-loader --save-dev

1.vue-cli2搭建的项目（1）

找到build文件夹下面的utils.js
exports.cssLoaders = function (options) {}中加入：
path.resolve(__dirname, ‘…/src/assets/styles/common.less’) //具体自己的路径
return{} 中修改：
less: generateLoaders(‘less’) 改为 less: lessResourceLoader()

2.vue-cli2搭建的项目（2）

同样找到其中的return的内容，less: generateLoaders(‘less’)改为：
less: generateLoaders(‘less’).concat({
loader: ‘sass-resources-loader’,
options: {
resources: path.resolve(__dirname, ‘…/src/assets/styles/common.less’)
}
})

3.vue-cli3、vue-cli4

搭建的项目需要自己在根目录下创建vue.config.js，直接写需要修改的配置即可：

module.exports = {
// 加载less加载器，路径：./public/css/common.less
chainWebpack: config => {
const oneOfsMap = config.module.rule(‘less’).oneOfs.store
oneOfsMap.forEach(item => {
item
.use(‘sass-resources-loader’)
.loader(‘sass-resources-loader’)
.options({
// Provide path to the file with resources
resources: ‘./public/css/common.less’,
// Or array of paths
// resources: [’./path/to/vars.scss’, ‘./path/to/mixins.scss’]
})
.end()
})
}
}