亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

ElvisYang · 更新于 2021-05-24

Sass 安裝

1. 前言

這一小節我們來學習如何安裝 Sass ，本小節會分別講解在 Ruby 環境和 Node 環境下安裝 Sass 。 一般來講我們前端的項目工程都是在 Node 環境下的，所以我會重點講解在 Node 環境下的前端工程中安裝 Sass ，同時本節還會講述在安裝 Sass 時容易遇到的問題和解決方案。

2. 在 Ruby 環境中安裝 Sass

Ruby 是一門開源的動態編程語言，Sass 就是基于 Ruby 語言開發而成的，當然你沒必要去深入 Ruby 的知識，這里只要了解一下就可以了，所以我們先來講如何在 Ruby 環境下安裝 Sass 。

2.1 安裝 Ruby

首先我們要在電腦上安裝 Ruby ，Mac 電腦自帶 Ruby 無需再次安裝；Windows 電腦首先需要下載 Ruby，建議使用 Ruby+Devkit 2.6.X (x64) 安裝程序。安裝 Ruby 完成后可以在命令行測試是否安裝成功：

$ ruby -v
// 出現如下內容則表示安裝成功
ruby 2.3.7p456 (2018-03-28 revision 63024) [universal.x86_64-darwin18]

上面我是在 MacOS 的命令行敲擊的命令，在 Windows 中也是一樣的。在安裝后我們需要使用 RubyGems 2.6.x 以上版本來安裝 Sass。 RubyGems 是用來安裝基于 Ruby 的軟件的，就像我們常用的 npm 包管理器。

2.2 安裝 Sass

安裝好 Ruby 后，我們可以直接使用它像下面這樣安裝 Sass ：

// 如遇權限問題請使用 sudo 權限
$ gem install sass

安裝完成后你需要在命令行中敲擊如下命令來查看是否安裝成功：

$ sass -v
// 出現 Sass 版本則安裝成功

安裝成功后你就可以在命令行里使用 Sass 了，我們這里舉幾個例子來看下：

//單個文件轉換命令, 將 a.scss 的內容轉換為 css 到 b.css 中
$ sass a.scss b.css

//單文件監聽命令，文件發生變化則自動編譯
sass --watch a.scss:b.css

// 監聽指定的目錄
sass --watch assets/sass:public/styles

關于 Sass 的知識會在后面的章節詳細說明，下面我們講解在前端的項目中是如何安裝 Sass 的。

3. 在前端項目中安裝 Sass

上面我們講了在 Ruby 環境中安裝 Sass ，但我們前端在 Ruby 環境下開發是非常少的，我們前端現在基本都使用 Webpack 構建，一般都是在 Node 環境開發，那在前端項目里是如何安裝 Sass 呢？

首先你要知道 node-sass 和 dart-sass ，這兩個都是提供好的類庫，是 Sass 的實現，本身 Sass 是使用 Ruby 語言寫的，但是它提供了很多接口以方便其他語言來集成和封裝，node-sass 和 dart-sass 就是基于 LibSass（ Sass 的 C 版本） 封裝而來的。

它們和 LibSass 的關系就是橘子和橘子汁的關系，我們前端基本也都是通過這兩個庫來使用 Sass ，我們畫個圖來看下它們的關系：
圖片描述

本章節我們以 node-sass 為例，本教程中所有的內容都是以 node-sass 為例的。

3.1 使用 npm 安裝 node-sass

在 Ruby 環境安裝 Sass 我們使用了 gem ，那么在安裝 node-sass 的時候我們需要使用 npm ，作為前端你一定是知道 npm 包管理器的，所以我們直接像下面這樣使用 npm 安裝：

$ npm install node-sass

// 將 node-sass 寫入項目的 package.json 中
$ npm install node-sass --save-dev

上面我們僅僅是在 Node 環境安裝了 Sass，但我們前端的項目是使用 Webpack 來構建，那么我們還需要使用 sass-loader 來編譯項目中的 Sass ，所以我們需要在 Webpack 的配置中配置 sass-loader ，配置如下：

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
          loader: "style-loader" // 將 JS 字符串生成為 style 節點
      }, {
          loader: "css-loader" // 將 CSS 轉化成 CommonJS 模塊
      }, {
          loader: "sass-loader" // 將 Sass 編譯成 CSS
      }]
    }]
  }
};

上面就是在我們的前端項目中安裝 Sass 的方式，后面我們將詳細介紹 Sass 的使用，更多關于 Webpack 的配置請查閱 Webpack 文檔。

4. 常見問題

一般我們比較常見的問題就是安裝 sass 或者 node-sass 特別慢導致安裝失敗，由于國內網絡的限制我們需要切換 gem 和 npm 源。切換 gem 源使用如下命令：

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
// 查看 gem 源
gem sources -l

使用 npm 安裝 node-sass 過慢的話我們可以使用 cnpm 來替換 npm ，或者使用如下命令切換 npm 源：

npm install -g mirror-config-china --registry=http://registry.npm.taobao.org

5. 小結

本節我們主要講解了在 Ruby 環境下安裝 Sass 和在 Node 環境下安裝 Sass ，以及在前端使用 Webpack 構建的項目中安裝 Sass，我們畫個流程圖來回憶一下本節的內容，首先我們回憶下在 Ruby 環境安裝 Sass 的流程：
圖片描述

最后我們再回顧下在 Node 環境中安裝 Sass：
圖片描述