Vue全局使用less样式,组件使用全局样式文件中定义的变量操作


Posted in Javascript onOctober 21, 2020

当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量,此时只在main.js中import是不行的。

目录结构如下:

Vue全局使用less样式,组件使用全局样式文件中定义的变量操作

即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。

Vue全局使用less样式,组件使用全局样式文件中定义的变量操作

Vue全局使用less样式,组件使用全局样式文件中定义的变量操作

此时,只用import在main.js中导入variables.less文件是会报错的。

解决办法:

1、安装less和less-loader

npm i less less-loader -D

2、要想全局使用还需使用一个插件( sass-resources-loader ),没有写错,就是sass

npm i sass-resources-loader -D

3、安装完sass-resources-loader后,配置webpack,找到build/utils.js文件,在cssLoaders函数中添加使用全局less函数

Vue全局使用less样式,组件使用全局样式文件中定义的变量操作

// 增加全局使用less函数
 function lessResourceLoader() {
 var loaders = [
  cssLoader,
  'less-loader',
  {
  loader: 'sass-resources-loader',
  options: {
   resources: [
   path.resolve(__dirname, '../src/assets/less/variables.less'), //定义全局变量的文件路径
   ]
  }
  }
 ];
 if (options.extract) {
  return ExtractTextPlugin.extract({
  use: loaders,
  fallback: 'vue-style-loader'
  })
 } else {
  return ['vue-style-loader'].concat(loaders)
 }
 }

并在return中用你定义的lessResourceLoader函数替换less: generateLoaders('less')这个函数。

return {
 css: generateLoaders(),
 postcss: generateLoaders(),
 less: lessResourceLoader('less'),
 sass: generateLoaders('sass', { indentedSyntax: true }),
 scss: generateLoaders('sass'),
 stylus: generateLoaders('stylus'),
 styl: generateLoaders('stylus')
 }

Vue全局使用less样式,组件使用全局样式文件中定义的变量操作

4、完成之后就可以重新运行项目了

npm run dev

补充知识:Vue less使用scope时渗入修改子组件样式

我就废话不多说了,大家还是直接看代码吧~

@aaa: ~'>>>';
.wrap {
  @{aaa} .component1 {
    width: 120px;
  }
/deep/ .component2 {
    width: 130px;

}
}

以上这篇Vue全局使用less样式,组件使用全局样式文件中定义的变量操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
js 图片懒加载的实现
Oct 21 #Javascript
uniapp实现可以左右滑动导航栏
Oct 21 #Javascript
解决vue-loader加载不上的问题
Oct 21 #Javascript
Vue实现返回顶部按钮实例代码
Oct 21 #Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 #Javascript
uniapp实现可滑动选项卡
Oct 21 #Javascript
element中table高度自适应的实现
Oct 21 #Javascript
You might like
杏林同学录(二)
2006/10/09 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
brook javascript框架介绍
2011/10/10 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
js中的 || 与 && 运算符详解
2018/05/24 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
2020/12/19 Vue.js
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python实现ip查询示例
2014/03/26 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
安全例会汇报材料
2014/08/23 职场文书
货款欠条范本
2015/07/03 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
详解如何使用Nginx解决跨域问题
2022/05/06 Servers