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 相关文章推荐
浅析js封装和作用域
Jul 09 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
小程序实现带年月选取效果的日历
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
单位速度在实战中的运用
2020/03/04 星际争霸
坏狼的PHP学习教程之第1天
2008/06/15 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
javascript中的有名函数和无名函数
2007/10/17 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
求职简历中个人的自我评价
2013/12/01 职场文书
总经理的岗位职责
2014/02/23 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
结婚保证书
2015/01/16 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android