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的监控数据是否发生改变
Apr 11 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
splice slice区别
2006/10/09 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
python中嵌套函数的实操步骤
2019/02/27 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
详解python statistics模块及函数用法
2019/10/27 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
党员评议自我评价
2015/03/03 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
教学质量月活动总结
2015/05/11 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript