在项目中使用 SCSS

时间：2021-08-31 09:12:40

背景概述

1. CSS预处理器

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

2.SASS和SCSS的区别

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

项目引入

1.vue-loader

在讲如何在vue项目中使用scss之前，我们先来简单了解一个概念，那就是vue-loader。vue-loader是什么东西呢？vue-loader其实就是一个webpack的loader。用来把vue组件转换成可部署的js,html,css模块。所以我们如果要想再vue项目中使用scss,肯定要告诉vue-loader怎么样解析我的scss文件。
不了解webpack的同学可以先去自行百度。我这里就放一张图，看完大家可以也就能知道webpack能做些什么事情了。

在项目中使用 SCSS

2.安装SCSS

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

npm  install sass-loader --save-dev

npm install node-sass --sava-dev

3.添加配置

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

{

    test: /\.scss$/,

    loaders: ['style', 'css', '

}

4.如何使用

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

<style lang="scss">

</style>

相关文章