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的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
常用DOM整理
Jun 16 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
vue+element实现表单校验功能
May 20 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
js实现可爱的气泡特效
Sep 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
php使用正则过滤js脚本代码实例
2014/05/10 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
以windows service方式运行Python程序的方法
2015/06/03 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
红色经典观后感
2015/06/18 职场文书
律师催款函范文
2015/06/24 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS