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 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
点击下载链接 弹出页面实现代码
Oct 01 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
React快速入门教程
Jan 17 Javascript
JS中Array数组学习总结
Jan 18 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 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
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
js实现打字小游戏
2019/12/17 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
python开发游戏的前期准备
2019/05/05 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
德国综合购物网站:OTTO
2018/11/13 全球购物
升职自荐信
2013/11/28 职场文书
女方回门宴答谢词
2014/01/14 职场文书
七一党建活动方案
2014/01/28 职场文书
高中家长寄语
2014/04/02 职场文书
消防安全承诺书
2014/05/22 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
新教师个人工作总结
2015/02/06 职场文书
2015年市场部工作总结
2015/04/30 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis