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

本文介绍了在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()
})
}
}

3.vue-cli2和vue-cli3的区别

  • vue-cli3是基于webpack4打造,vue-cli2是基于webpack3
  • vue-cli3的设计原则是“0配置”,移除(隐藏)配置文件build和config等目录
  • vue-cli3提供了vue ui 命令,提供了可视化配置
  • vue-cli3移除了static文件夹,新增了public文件夹,并且将index.html移动到public中
  • 2.0启动npm run dev,3.0启动npm run serve

4.vue-cli3和vue-cli4的区别

vue-cli3和vue-cli4的区别

5.vue-cli3配置项目的三种办法

1.根目录下创建vue.config.js

module.exports = {}

2.运行 vue ui,然后打开浏览器进行可视化配置

3.直接在依赖中找到并修改

node_modules@vue\cli-service\webpack.config.js
node_modules@vue\cli-service\lib\Service.js

6.分清vue版本和vue-cli版本

1.cmd中 vue -V 查看的是vue-cli的版本(2、3、4),vue-cli2、vue-cli3可以创建vue2项目;vue-cli4可以创建vue2、vue3项目。
2.查看vue版本需要在package包中查看,或者在vue所在目录进行cmd,输入 npm list vue 查看

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值