vue2中使用sass并配置全局的sass样式变量的方法


Posted in Javascript onSeptember 04, 2018

Sass语言

      Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量、嵌套规则、mixins、导入等css没有但开发语言(如Java、C#、Ruby等)有的一些特性,并且完全兼容CSS语法。Sass有助于保持大型样式表结构良好。

      Sass有两种语法。

      一种称为SCSS,是一个CSS3语法的扩充版本,也就是说,所有符合CSS3语法的样式表也都是具有相同语法意义的SCSS文件,SCSS样式表文件要以.scss扩展名结尾。在vue中,我们可以使用<style lang="scss"></style>来标志里面的内容是以SCSS语法来书写的。

      一种称为SASS,是Sass以前的语法,它和python一样,没有{}大括号来标志程序块,而是以缩进来标志嵌套层级;而且也不使用分号,而是用换行符来分隔属性。SASS样式表文件要以.sass扩展名结尾。在vue中,我们可以使用<style lang="sass"></style>来标志里面的内容是以SASS语法来书写的。

在vue中使用样式文件sass,如果每个.vue文件都引入该样式,build出来文件后,势必会造成样式的重复,冗余,如果在main.js中全局引入一个scss文件,在其中定义变量在其他组件或者页面中引用报变量未定义错误,其他的样式可以正常显示,显然是编译的问题。那么,全局设置并加载样式就显得很有必要了!

首先,npm安装好

"sass-loader": "^6.0.7",
 "sass-resources-loader": "^1.3.3",

在build/webpack.base.conf.js中,在module的rules里添加

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
   }

然后在build/utils.js文件中加入如下代码:

需要注意的是:我的全局样式是放在src/common/sass/index.scss中的

function resolveResouce(name) {
  return path.resolve(__dirname, '../src/common/sass/' + name);
 }
 function generateSassResourceLoader() {
  var loaders = [
   cssLoader,
   'postcss-loader',
   'sass-loader',
   {
    loader: 'sass-resources-loader',
    options: {
     //这是用到的sass文件,多个文件时用数组的形式传入,这是带有变量和mixin的scss文件
     resources: [resolveResouce('variable.scss'), resolveResouce('mixin.scss')] 注意这是我全局样式的位置,个人不同,需做调整
    }
   }
  ];
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

最后,将该页面下方的return部分,改成如下模样

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  //sass: generateLoaders('sass', { indentedSyntax: true }),
  //scss: generateLoaders('sass'),
  sass: generateSassResourceLoader(),
  scss: generateLoaders('sass')
   .concat(
    {
     loader: 'sass-resources-loader',
     options: {
      resources: path.resolve(__dirname, '../src/common/sass/index.scss') //注意这是我全局样式的位置,个人不同,需做调整
     }
    }
   ),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

总结

以上所述是小编给大家介绍的vue2中使用sass并配置全局的sass样式变量,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 #Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 #Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 #Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 #Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 #Javascript
create-react-app安装出错问题解决方法
Sep 04 #Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 #Javascript
You might like
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
如何在PHP中读写文件
2020/09/07 PHP
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
解读! Python在人工智能中的作用
2017/11/14 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
数控专业推荐信范文
2013/12/02 职场文书
校本教研工作制度
2014/01/22 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
病媒生物防治方案
2014/05/13 职场文书
民主生活会剖析材料
2014/09/30 职场文书
幼师求职自荐信
2015/03/26 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技