背景概述
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能做些什么事情了。
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>
作者：朝雨憶輕塵
出處：https://www.cnblogs.com/xifengxiaoma/
版權所有，歡迎轉載，轉載請注明原文作者及出處。