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

ElvisYang · 更新于 2021-05-24

Sass 安裝

1. 前言

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

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

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

2.1 安裝 Ruby

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

$ 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 以上版本來(lái)安裝 Sass。 RubyGems 是用來(lái)安裝基于 Ruby 的軟件的，就像我們常用的 npm 包管理器。

2.2 安裝 Sass

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

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

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

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

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

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

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

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

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

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

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

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

它們和 LibSass 的關(guān)系就是橘子和橘子汁的關(guān)系，我們前端基本也都是通過(guò)這兩個(gè)庫(kù)來(lái)使用 Sass ，我們畫個(gè)圖來(lái)看下它們的關(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 來(lái)構(gòu)建，那么我們還需要使用 sass-loader 來(lái)編譯項(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 的配置請(qǐng)查閱 Webpack 文檔。

4. 常見(jiàn)問(wèn)題

一般我們比較常見(jiàn)的問(wèn)題就是安裝 sass 或者 node-sass 特別慢導(dǎo)致安裝失敗，由于國(guó)內(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 過(guò)慢的話我們可以使用 cnpm 來(lái)替換 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è)流程圖來(lái)回憶一下本節(jié)的內(nèi)容，首先我們回憶下在 Ruby 環(huán)境安裝 Sass 的流程：
圖片描述

最后我們?cè)倩仡櫹略?Node 環(huán)境中安裝 Sass：
圖片描述