Vue笔记：在项目中使用 SCSS

背景概述

1. CSS预处理器

css预处理器定义了一种新的编程语言，编译后成正常的CSS文件。为CSS增长一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多。CSS 预处理器语言有 scss（sass）、less 等。css

2.SASS和SCSS的区别

除了文件扩展名不一样（分别是“.sass” 和 “.scss”）外，Sass是以严格缩进式语法规则来书写的，不带大括号和分号，而SCSS的语法和CSS书写语法相似。html

项目引入

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

2.安装SCSS

在webpack中，全部预处理器都要匹配相应的loader,vue-loader容许其余的webpack-loader处理组件中的一部分吗，而后它根据lang属性自动判断出要使用的loaders。因此，其实只要安装处理sass/scss的loader。就能在vue中使用scss了。
执行下面命令，安装 sass/scss loader。node

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

3.添加配置

在build文件夹下的webpack.base.conf.js的 rules 标签下添加配置。webpack

{ test: /\.scss$/, loaders: ['style', 'css', ' }

4.如何使用

在页面代码 style 标签中把 lang 设置成 scss 便可。web

<style lang="scss">

</style>

做者：朝雨忆轻尘
出处：https://www.cnblogs.com/xifengxiaoma/ 
版权全部，欢迎转载，转载请注明原文做者及出处。npm