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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
JavaScript 反射学习技巧
Oct 16 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
一段php加密解密的代码
2007/07/16 PHP
php include加载文件两种方式效率比较
2010/08/08 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
Django框架安装方法图文详解
2019/11/04 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
监理员的岗位职责
2013/11/13 职场文书
小学六年级毕业感言
2015/07/30 职场文书
小学英语课教学反思
2016/02/15 职场文书
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技