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实战_读书笔记1—选择jQuery
Jan 22 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 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
PHP脚本的10个技巧(3)
2006/10/09 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
PHP反射学习入门示例
2019/06/14 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
一些不错的js函数ajax
2008/08/20 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
JS验证不重复验证码
2017/02/10 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
python解决网站的反爬虫策略总结
2016/10/26 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
英文求职信结束语大全
2013/10/26 职场文书
销售文员的岗位职责
2013/11/20 职场文书
娱乐节目策划方案
2014/06/10 职场文书
大国崛起英国观后感
2015/06/02 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
在Docker容器中部署SQL Server
2022/04/11 Servers
python实现学生信息管理系统(面向对象)
2022/06/05 Python
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL