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下给元素添加事件的方法与代码
Aug 13 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
JQuery触发事件例如click
Sep 11 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
js生成随机数的方法实例
Oct 16 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
javascript document.images实例
2008/05/27 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
python设置环境变量的作用和实例
2019/07/09 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
Python中如何定义一个函数
2016/09/06 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
聚美优品的广告词
2014/03/14 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
pandas数值排序的实现实例
2021/07/25 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android