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中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
React服务端渲染(总结)
Jul 01 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
vue实现标签云效果的方法详解
Aug 28 Javascript
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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
深入理解Python 代码优化详解
2014/10/27 Python
python看某个模块的版本方法
2018/10/16 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
python实现密码强度校验
2020/03/18 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
幼儿园教师辞职信
2014/01/18 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
公司管理建议书范文
2014/03/12 职场文书
年终总结会议主持词
2014/03/17 职场文书
实习生工作证明范本
2014/09/14 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
停电放假通知
2015/04/14 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
Python3.10的一些新特性原理分析
2021/09/15 Python