第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

ElvisYang · 更新于 2021-05-24

Sass 安裝

1. 前言

這一小節(jié)我們來學(xué)習(xí)如何安裝 Sass ，本小節(jié)會分別講解在 Ruby 環(huán)境和 Node 環(huán)境下安裝 Sass 。 一般來講我們前端的項(xiàng)目工程都是在 Node 環(huán)境下的，所以我會重點(diǎn)講解在 Node 環(huán)境下的前端工程中安裝 Sass ，同時(shí)本節(jié)還會講述在安裝 Sass 時(shí)容易遇到的問題和解決方案。

2. 在 Ruby 環(huán)境中安裝 Sass

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

2.1 安裝 Ruby

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

$ ruby -v
// 出現(xiàn)如下內(nèi)容則表示安裝成功
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 ：

// 如遇權(quán)限問題請使用 sudo 權(quán)限
$ gem install sass

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

$ sass -v
// 出現(xiàn) Sass 版本則安裝成功

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

//單個(gè)文件轉(zhuǎn)換命令, 將 a.scss 的內(nèi)容轉(zhuǎn)換為 css 到 b.css 中
$ sass a.scss b.css

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

// 監(jiān)聽指定的目錄
sass --watch assets/sass:public/styles

關(guān)于 Sass 的知識會在后面的章節(jié)詳細(xì)說明，下面我們講解在前端的項(xiàng)目中是如何安裝 Sass 的。

3. 在前端項(xiàng)目中安裝 Sass

上面我們講了在 Ruby 環(huán)境中安裝 Sass ，但我們前端在 Ruby 環(huán)境下開發(fā)是非常少的，我們前端現(xiàn)在基本都使用 Webpack 構(gòu)建，一般都是在 Node 環(huán)境開發(fā)，那在前端項(xiàng)目里是如何安裝 Sass 呢？

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

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

本章節(jié)我們以 node-sass 為例，本教程中所有的內(nèi)容都是以 node-sass 為例的。

3.1 使用 npm 安裝 node-sass

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

$ npm install node-sass

// 將 node-sass 寫入項(xiàng)目的 package.json 中
$ npm install node-sass --save-dev

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

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

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

4. 常見問題

一般我們比較常見的問題就是安裝 sass 或者 node-sass 特別慢導(dǎo)致安裝失敗，由于國內(nèi)網(wǎng)絡(luò)的限制我們需要切換 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. 小結(jié)

本節(jié)我們主要講解了在 Ruby 環(huán)境下安裝 Sass 和在 Node 環(huán)境下安裝 Sass ，以及在前端使用 Webpack 構(gòu)建的項(xiàng)目中安裝 Sass，我們畫個(gè)流程圖來回憶一下本節(jié)的內(nèi)容，首先我們回憶下在 Ruby 環(huán)境安裝 Sass 的流程：
圖片描述

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