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 相关文章推荐
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
详解ES6中的let命令
Apr 05 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
js实现div色块拖动录制
Jan 16 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
剖析Python的Twisted框架的核心特性
2016/05/25 Python
快速了解python leveldb
2018/01/18 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
django中静态文件配置static的方法
2018/05/20 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
艾滋病宣传标语
2014/06/25 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书