vue如何引入sass全局变量


Posted in Javascript onJune 28, 2018

sass或者less都提供变量设置,在需求切换主题的项目中使用less或者sass变量,只要修改变量值,编译后所有用到该变量的样式都会被修改为你想要的效果,但是在vue-cli搭建的项目中,在main.js中全局引入一个scss文件,在其中定义变量在其他组件或者页面中引用报变量未定义错误,其他的样式可以正常显示,显然是编译的问题。

傻瓜式引用

在每个用到全局变量的组件都引入该全局样式文件

@import 'path/fileName.scss'

但是组件或者页面不在统一层目录下,引入的路径可能也会有差异,所以还是看看 sass-resources-loader 的解决方法吧。

sass-resources-loader引入sass全局变量

sass-resources-loader可以访问sass资源任何一个需要访问的sass模块。所以,可以使用共享变量和混合所有SASS样式,而不去每个文件都引用。

安装sass-resources-loader

npm install --save-dev sass-resources-loader

修改sass配置

build 文件夹下找到 util.js 修改sass编译器loader的配置

// 全局文件引入 当然只想编译一个文件的话可以省去这个函数
function resolveResource(name) {
 return path.resolve(__dirname, '../static/style/' + name);
}
function generateSassResourceLoader() {
 var loaders = [
  cssLoader,
  'sass-loader',
  {
   loader: 'sass-resources-loader',
   options: {
    // 多个文件时用数组的形式传入,单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
    resources: [resolveResource('common.scss')] 
   }
  }
  ];
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

修改sass配置的调用为 generateSassResourceLoader()

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  // vue-cli默认sass配置
  // sass: generateLoaders('sass', { indentedSyntax: true }), 
  // scss: generateLoaders('sass'),
  // 新引入的sass-resources-loader
  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

main.js 中引用 common.scss 文件,重启服务,其中定义的变量在其他组件就可以使用了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
javascript闭包入门示例
Apr 30 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
原生js实现轮播图
Feb 27 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
js实现图片推拉门效果代码实例
May 18 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
小程序实现带年月选取效果的日历
Jun 27 #Javascript
浅谈Angular6的服务和依赖注入
Jun 27 #Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 #Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 #Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 #Javascript
浅谈Webpack下多环境配置的思路
Jun 27 #Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 #Javascript
You might like
使用php shell命令合并图片的代码
2011/06/23 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
Javascript & DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
Python max内置函数详细介绍
2016/11/17 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
出纳岗位职责模板
2013/11/27 职场文书
商务英语求职自荐信范文
2013/12/24 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
2014年端午节活动方案
2014/03/11 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
医院营销工作计划
2015/01/16 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
优化Mysql查询的示例
2022/04/26 MySQL
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers