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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
利用JavaScript写一个简单计算器
Nov 27 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独立Session数据库存储操作类分享
2014/06/11 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
Python的设计模式编程入门指南
2015/04/02 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
教育孩子心得体会
2014/01/01 职场文书
广告学毕业生求职信
2014/01/30 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
廉洁自律承诺书
2014/03/27 职场文书
2014中考励志标语
2014/06/05 职场文书
公司催款律师函
2015/05/27 职场文书
高二数学教学反思
2016/02/18 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server