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 arguments 传递给函数的隐含参数
Aug 21 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 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
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
js select option对象小结
2013/12/20 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
浅谈python import引入不同路径下的模块
2017/07/11 Python
python GUI实例学习
2017/11/21 Python
Django权限机制实现代码详解
2018/02/05 Python
Python编写打字训练小程序
2019/09/26 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
详解python中的闭包
2020/09/07 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
教师评优事迹材料
2014/01/10 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
企业承诺书怎么写
2014/05/24 职场文书
管理提升方案
2014/06/04 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android