vue项目中使用scss的方法步骤


Posted in Javascript onMay 16, 2019

一 概述

随着sass/less等css预处理器的出现,编写css变的越来越有乐趣。所以现在越来越多的人在项目中喜欢使用scss或者less。(我自己就是一个)。由于最近在写一个vue项目。所以就把写项目期间每天的一些知识点写在博客里。所以最近的博客应该都会和vue有关。今天要和大家分享的就是如何在vue项目中引入scss(引入less也类似)

二 vue中引入scss

2.1 vue-loader

在讲如何在vue项目中使用scss之前,我们先来简单了解一个概念,那就是vue-loader。vue-loader是什么东西呢?vue-loader其实就是一个webpack的loader。用来把vue组件转换成可部署的js,html,css模块。所以我们如果要想再vue项目中使用scss,肯定要告诉vue-loader怎么样解析我的scss文件。

不了解webpack的同学可以先去自行百度。我这里就放一张图,看完大家可以也就能知道webpack能做些什么事情了。

vue项目中使用scss的方法步骤

2.2 loader配置

在webpack中,所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack-loader处理组件中的一部分吗,然后它根据lang属性自动判断出要使用的loaders。所以,其实只要安装处理sass/scss的loader。就能在vue中使用scss了。

现在我们来安装sass/scss loader

npm install sass-loader node-sass --save-dev

2.3 为什么无需配置

我们前面说到,vue-loader允许能根据lang属性自动判断出要使用的loaders。它是怎么样做到的?有这么神奇嘛?我们下面来看一看最核心部分的源代码

exports.cssLoaders = function (options) {
 options = options || {}

 var cssLoader = {
  loader: 'css-loader',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }

 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
  var loaders = [cssLoader]
  if (loader) {
   loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
     sourceMap: options.sourceMap
    })
   })
  }

  // Extract CSS when that option is specified
  // (which is the case during production build)
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }
}

就是上述这段代码让vue-loader有了这种能力,它会根据不同的文件去使用不同的loader

2.4 使用scss

这样你就可以愉快的使用scss了。

<style scoped lang="sass">
   xxxx
   xxxx
</style>

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

Javascript 相关文章推荐
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
树结构之JavaScript
Jan 24 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 Javascript
微信小程序云开发使用方法新手初体验
May 16 #Javascript
angular多语言配置详解
May 16 #Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 #Javascript
Django模板继承 extend标签实例代码详解
May 16 #Javascript
vue视图不更新情况详解
May 16 #Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 #Javascript
Vue中props的详解
May 16 #Javascript
You might like
实用函数3
2007/11/08 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
短信提示使用 特效
2007/01/19 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
python查看微信好友是否删除自己
2016/12/19 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
生物制药毕业生自荐信
2013/10/16 职场文书
初中生学习的自我评价
2013/11/14 职场文书
销售主管岗位职责
2014/02/08 职场文书
学校联谊活动方案
2014/02/15 职场文书
《囚绿记》教学反思
2014/03/01 职场文书