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 相关文章推荐
js href的用法
May 13 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
javascript里使用php代码实例
Dec 13 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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
收音机术语解释
2021/03/01 无线电
CI框架中zip类应用示例
2014/06/17 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python实现通过shelve修改对象实例
2014/09/26 Python
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
python中requests模块的使用方法
2015/04/08 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
详解Python Socket网络编程
2016/01/05 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
毕业生学校推荐信范文
2014/05/21 职场文书
法人任命书范本
2014/06/04 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
防卫过当辩护词
2015/05/21 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
详解Python描述符的工作原理
2021/06/11 Python