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实现切换标签页效果实例代码
Nov 01 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
微信JS接口大全
Aug 25 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
js微信分享接口调用详解
Jul 23 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
php巧获服务器端信息
2006/12/06 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
php中final关键字用法分析
2016/12/07 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
2011/08/23 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
javascript实现切割轮播效果
2019/11/28 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
python基础教程之Filter使用方法
2017/01/17 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python-str,list,set间的转换实例
2018/06/27 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
Django实现文件上传下载功能
2019/10/06 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
大学社团计划书
2014/05/01 职场文书
林肯就职演讲稿
2014/05/19 职场文书
普通党员整改措施
2014/10/24 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
党员检讨书范文
2014/12/27 职场文书
幼儿园中班个人总结
2015/02/28 职场文书