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 相关文章推荐
javascript 弹出层组件(升级版)
May 12 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
jQuery插件制作的实例教程
May 16 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
一篇文章学会Vue中间件管道
Jun 20 Vue.js
详解解决使用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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
Python 40行代码实现人脸识别功能
2017/04/02 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
Python List cmp()知识点总结
2019/02/18 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
举例讲解Python装饰器
2020/12/24 Python
python自动生成sql语句的脚本
2021/02/24 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
物流管理应届生求职信
2013/11/07 职场文书
简单的辞职信范文
2014/01/18 职场文书
大型活动组织方案
2014/05/10 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
保研导师推荐信
2015/03/25 职场文书
入党积极分子群众意见
2015/06/01 职场文书
高一语文教学反思
2016/02/16 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL