Vue筆記：在項目中使用 SCSS

背景概述

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/ 
版權全部，歡迎轉載，轉載請註明原文做者及出處。