Vue引入sass并配置全局变量的方法


Posted in Javascript onJune 27, 2018

引入sass

首先使用官方提供的脚手架vue-cli进行搭建框架,这里就不做说明了,查阅官网即可。

等安装完所有依赖后,安装sass的依赖包:

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

然后在build文件夹下的webpack.base.conf.js的rules里面添加配置:

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

然后添加csslang属性。注意,这里是scss,而且css文件的后缀也是scss:

<style lang="scss"></style>

最后需要重新编译一下项目,否则没有效果。

$ npm run dev

现在就可以随意的使用sass了,这时候会发现如果我想定义几个变量进行全局使用,好像只能在页面中通过@import来引入,这显然不够优雅,可以这样解决。

配置sass全局变量

有一个babel插件可以完美的解决这个问题:sass-resources-loader可以访问sass资源任何一个需要访问的sass模块。所以,可以使用共享变量和混合所有SASS样式,而不去每个文件都引用。

首先进行插件安装:

npm install --save-dev sass-resources-loader

然后在 build 文件夹下找到 util.js 修改sass编译器loader的配置,直接把下面的代码复制进去即可:

// 全局文件引入 当然只想编译一个文件的话可以省去这个函数
function resolveResource(name) {
 return path.resolve(__dirname, '../src/style/' + name);
}
function generateSassResourceLoader() {
 var loaders = [
  cssLoader,
  'sass-loader',
  {
   loader: 'sass-resources-loader',
   options: {
    // 多个文件时用数组的形式传入,单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
    resources: [resolveResource('theme.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')
 }

改完配置后重启服务就可以在theme.scss里定义全局变量并在页面中引用了。

需要注意的是,scss里的变量是$开头,而less里的变量是@开头。比如我想定义一个项目的主色调变量,我可以在theme.scss里这样定义:

$c-primary: #fd7a00;
$theme-blue: #3296fa;
$theme-red: #da3838;

引用变量的时候直接引用变量名即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
js 两数组去除重复数值的实例
Dec 06 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 #Javascript
vue中v-model的应用及使用详解
Jun 27 #Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 #Javascript
Vue实现todolist删除功能
Jun 26 #Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 #Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 #Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
You might like
PHP文件下载类
2006/12/06 PHP
php网页后退不再出现过期
2007/03/08 PHP
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
CentOS6.5设置Django开发环境
2016/10/13 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
如何在Django项目中引入静态文件
2019/07/26 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
《纸船和风筝》教学反思
2014/02/15 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
个人学习总结范文
2015/02/15 职场文书
离婚案件答辩状
2015/05/22 职场文书
热血教师观后感
2015/06/10 职场文书
让子弹飞观后感
2015/06/11 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
委托书范本格式
2019/04/18 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android