摘要：經常處于隨機級聯樣式表項目維護者的心血來潮之中，并且試圖讓項目編譯過程中涉及的其他庫，框架或預處理器經常成為一場噩夢。上下文中的預處理器基本上是構建過程中的一個步驟。

來源 | 愿碼(ChainDesk.CN)內容編輯
愿碼Slogan | 連接每個程序員的故事
網站 | http://chaindesk.cn

愿碼愿景 | 打造全學科IT系統免費課程，助力小白用戶、初級工程師0成本免費系統學習、低成本進階，幫助BAT一線資深工程師成長并利用自身優勢創造睡后收入。
官方公眾號 | 愿碼 | 愿碼服務號 | 區塊鏈部落
免費加入愿碼全思維工程師社群 | 任一公眾號回復“愿碼”兩個字獲取入群二維碼

本文閱讀時長：13min

以前使用Create React App，你實際上沒有很多選項可以直觀地清理。經常處于隨機級聯樣式表 （CSS）項目維護者的心血來潮之中，并且試圖讓項目編譯過程中涉及的其他庫，框架或預處理器經常成為一場噩夢。

Create React App上下文中的預處理器基本上是構建過程中的一個步驟。在這種情況下，我們討論的是采用某些樣式代碼（CSS或其他格式）的東西，將其編譯為基本CSS，并將其添加到構建過程的輸出中。

在本文的篇幅中，我們將介紹涵蓋與樣式相關的功能的各種材料，并突出顯示在我看來，Create React App中最好的新功能之一：支持CSS模塊和SASS。

CSS模塊能夠以防止引入全局重疊命名空間的方式模塊化你所導入的任何CSS代碼，盡管最終結果仍然只是一個巨大的CSS文件。

更好的項目組織

讓我們首先清理一下我們項目中的目錄結構。我們要做的就是將每個具有CSS和JavaScript代碼的組件分離到自己的文件夾中。先來創建NewTodo，Todo，App，TodoList，和Divider文件夾，并將它們所有相關的代碼放在其中的每一個文件夾中。

我們還需要在每個被調用的目錄中創建一個新文件，該文件index.js只負責導入和導出相應的組件。例如，App索引文件（src/App/index.js）將如下所示：

import App from "./App";
export default App;

Todo （src/Todo/index.js）的新索引文件 如下所示：

import Todo from "./Todo";
export default Todo;

你可以根據此模式猜測索引文件的內容NewTodo，TodoList以及它們的Divider外觀。

接下來，我們需要更改引用這些文件的每個位置，以便更輕松地導入所有這些文件。不幸的是，這將是一些繁瑣的工作，但我們需要做同樣的事情，以確保我們不會破壞過程中的任何事情。

首先，在中src/App/App.js，將TodoList import 組件更改為以下內容：

import TodoList from "../TodoList";

我們不需要做任何事情，Divider因為它是一個沒有導入的組件。NewTodo 并且Todo 是類似的類型，所以我們也可以跳過它們。src/TodoList/TodoList.js另一方面，我們需要處理很多事情，因為它是我們最高級別的組件之一并且進口很多：

import Todo from "../Todo";
import NewTodo from "../NewTodo";
import Divider from "../Divider";

但那還不是全部。我們的測試文件src/TodoList/TodoList.test.js也需要修改為包含文件的這些新路徑，否則我們的測試將失敗！我們需要幾乎與之前相同的導入列表：

import TodoList from "./TodoList";
import NewTodo from "../NewTodo";
import Todo from "../Todo";

當你重新加載你的應用程序時，你的代碼應該仍然正常工作，測試應該全部通過，一切都應該干凈利落！我們的完整項目結構現在應如下所示：

src/
  App/
    App.css
    App.js
    App.test.js
    index.js
  Divider/
    Divider.css
    Divider.js
    index.js
  NewTodo/
    NewTodo.css
    NewTodo.js
    NewTodo.test.js
    index.js
  Todo/
    Todo.css
    Todo.js
    Todo.test.js
    index.js
  TodoList/
    TodoList.css
    TodoList.js
    TodoList.test.js
    index.js
  index.css
  index.js
  setupTests.js
  ... etc ...

將CSS模塊引入我們的應用程序

如果我們想使用CSS模塊，我們需要遵循一些簡單的指南。首先，我們需要命名我們的文件[whatever].module.css，而不是[whatever].css。接下來我們需要做的是確保我們的樣式簡單命名并且易于引用。讓我們首先遵循這些約定并將我們的CSS文件重命名為Todoas src/Todo/Todo.module.css，然后我們將稍微改變一下內容：

.todo {
  border: 2px solid black;
  text-align: center;
  background: #f5f5f5;
  color: #333;
  margin: 20px;
  padding: 20px;
}
.done {
background: #f5a5a5;
}

接下來，我們將開放src/Todo/Todo.js以利用CSS模塊。我們在我們的Todo組件中創建了一個輔助函數cssClasses()，它返回我們應該在組件中使用的樣式，并且我們不需要進行更改以使所有工作與之前完全相同。我們還需要import在頂部更改我們的語句，因為我們重命名了文件并且正在改變我們的CSS加載到代碼中的方式！看看以下內容：

import styles from "./Todo.module.css";

這使我們的代碼可以Todo.module.css通過引用它們來利用定義的任何類名styles.[className]。例如，在前一個文件中，我們定義了兩個CSS類名：todo和done，所以我們現在可以通過styles.Todo和在組件中引用它們styles.done。我們需要更改cssClasses()函數才能使用它，所以讓我們現在進行那些確切的更改。在src/Todo/Todo.js，我們的cssClasses()功能現在應該如下所示：

  cssClasses() {
    let classes = [styles.todo];
    if (this.state.done) {
      classes = [...classes, styles.done];
    }
    return classes.join(" ");
  }

保存并重新加載，我們的應用程序應該恢復正常！接下來，讓我們更改組件hr內部的標簽todo以擁有自己的樣式和效果。返回src/Todo/Todo.module.css并為我們的hr標簽添加以下塊，我們將給出一個新類redDivider：

.redDivider {
  border: 2px solid red;
}

最后，返回我們的render()函數src/Todo/Todo.js，并將render()函數的hr標記包含更改保存并重新加載，現在我們應該完全劃分CSS代碼而不必擔心沖突和全局命名空間！這是輸出的樣子：

與CSS模塊的可組合性

這并不是CSS模塊給我們的全部，盡管它肯定是CSS模塊的重要組成部分之一，我們立即得到并毫不費力。我們還獲得了CSS可組合性，它能夠從其他類繼承CSS類，無論它們是否在主文件中。當您設置更復雜的嵌套組件時，這可能非常有用，這些組件都需要處理略有不同的樣式表，但彼此之間并沒有太大的不同。

假設我們希望能夠將某些組件標記為關鍵組件而不僅僅是常規Todos。我們不想對組件做太多改變; 我們希望它繼承與所有其他Todos相同的基本規則。我們需要設置一些代碼來實現這一目標。回到后面src/Todo/Todo.js，我們將進行一些修改以允許一個名為的新狀態屬性critical。我們將從constructor 組件開始，我們將添加新state屬性和bind 函數標記：

 constructor(props) {
    super(props);
    this.state = {
      done: false,
      critical: false
    };

this.markAsDone = this.markAsDone.bind(this);
this.removeTodo = this.removeTodo.bind(this);
this.markCritical = this.markCritical.bind(this);
}

我們在critical屬性中添加一個新屬性，state 并將其設置為默認值false。然后我們還引用了一個函數（我們還沒有編寫）markCritical，并且我們綁定了this，因為我們稍后將在事件處理程序中使用它。接下來，我們將解決這個問題markCritical()：

  markCritical() {
    this.setState({ critical: true });
  }

我們還需要修改我們的cssClasses()函數，以便它可以對這個新state屬性做出反應。為了演示CSS模塊的可組合性功能，我們將其設置classes為原來是一個空數組，然后第一個項目變為critical或todo，取決于項目是否標記為critical：

 cssClasses() {
    let classes = [];
    if (this.state.critical) {
      classes = [styles.critical];
    } else {
      classes = [styles.todo];
    }
    if (this.state.done) {
      classes = [...classes, styles.done];
    }
    return classes.join(" ");
  }

最后，在我們的render函數中，我們將創建button 標記以將項目標記為critical：

  render() {
    return (
      

        {this.props.description}
        

          Mark as Done
        
        
          Remove Me
        
        
          Mark as Critical
        
      

    );
  }

我們還沒有完成，盡管我們至少有90％的方式。我們還想回到src/Todo/Todo.module.css并為critical類名添加一個新塊，我們也將使用我們的可組合屬性：

.critical {
  composes: todo;
  border: 4px dashed red;
}

要使用合成，您需要做的就是添加一個新的CSS屬性，composes并為其指定一個您希望它組成的類名（或多個類名）。在這種情況下，撰寫是一種奇特的方式，它表示它繼承了其他類名的行為，并允許您覆蓋其他類名。在前面的例子中，我們說的critical是一個CSS模塊類，它由一個todo 模型作為基礎，并添加border 一個大的紅色虛線的組件，因為，我們只是說這意味著它是關鍵的。

像往常一樣保存并重新加載，您應該能夠將項目標記為標記為完成，標記為嚴重或兩者，或通過單擊刪除我刪除它們，如以下屏幕截圖所示：

這就是我們對CSS模塊的簡要介紹！在繼續之前，您還需要通過在屏幕中點擊U來快速更新測試快照yarn test。

SASS本質上是具有擴展功能支持的CSS。當我在這里說擴展功能支持時，我的意思是它！SASS支持以下功能集，CSS中缺少這些功能集：

· 變量

· 嵌套

· 部分CSS文件

· 導入支持

· 混入

· 擴展和繼承

· 運算符和計算

安裝和配置SASS

好消息是，在Create React App項目中獲得SASS支持非常簡單。我們首先需要通過yarn或安裝它npm。

$ yarn add node-sass

我們將看到它的大量輸出，但假設沒有錯誤并且一切順利，我們應該能夠重新啟動我們的開發服務器并開始使用一些SASS。讓我們創建一個更通用的實用程序SASS文件，它將負責存儲我們想要在整個應用程序中使用的標準化顏色，以及存儲整齊漸變hr模式的東西，以防我們想在其他地方使用它。

我們還將更改我們正在使用的一些顏色，以便有一些紅色，綠色和藍色，這取決于項目是分別是關鍵，完成還是兩者都不是。此外，我們需要稍微改變我們的項目，并添加一個新文件，以獲得一些共享樣式和顏色的概念。那么，讓我們開始吧：

src/shared.scss在我們的項目中創建一個新文件，并為其提供以下主體：

$todo-critical: #f5a5a5;
$todo-normal: #a5a5f5;
$todo-complete: #a5f5a5;
$fancy-gradient: linear-gradient(
  to right,
  rgba(0, 0, 0, 0),
  rgba(0, 0, 0, 0.8),
  rgba(0, 0, 0, 0)
);

接下來，跳轉到src/Divider/Divider.css并將文件重命名為src/Divider/Divider.scss。接下來，我們將更改對Divider.cssin 的引用src/Divider/Divider.js，如下所示：

import "./Divider.scss";

現在我們需要更改代碼Divider.scss以在我們的共享變量文件中導入并使用變量作為其中的一部分：

@import "../shared";
hr {
border: 0;
height: 1px;
background-image: $fancy-gradient;
}

因此，我們在新的共享SASS文件中導入src/，然后該background-image值只引用$fancy-gradient我們創建的變量，這意味著我們現在可以在需要時重新創建那個花哨的漸變而無需反復重寫它。

保存并重新加載，您應該看到沒有任何重大變化。

好消息是，在Create React App中將SASS引入CSS模塊基本上并不復雜。事實上，這些步驟是相同的！所以，如果我們想要開始混合這兩者，我們需要做的就是重命名一些文件并改變我們的導入處理方式。讓我們看看這個行動：

首先，返回我們的src/Todo/Todo.module.css文件并進行一個非常小的修改。具體來說，讓我們重命名它 src/Todo/Todo.module.scss。接下來，我們需要改變我們的import陳述src/Todo/Todo.js，否則整個事情將崩潰：

import styles from "./Todo.module.scss";

現在，我們應該讓我們的SASS使用Todo組件的CSS模塊，所以讓我們開始利用它。再次，我們需要import我們的shared文件放到此文件SASS也。請注意以下內容src/Todo/Todo.module.scss：

@import "../shared";

接下來，我們需要開始更改對各種背景顏色的引用。我們將常規Todos的背景更改為 $todo-normal。然后，我們將完成的Todo背景更改為 $todo-complete。最后，我們要將critical項目更改為 $todo-critical：

.todo {
  border: 2px solid black;
  text-align: center;
  background: $todo-normal;
  color: #333;
  margin: 20px;
  padding: 20px;
}

.done {
background: $todo-complete;
}

.hr {
border: 2px solid red;
}

.critical {
composes: todo;
background: $todo-critical;
}

保存并重新加載我們的項目，讓我們確保新的配色方案得到尊重：

現在，我們在Create React App項目中很好地集成了CSS模塊和SASS，而無需安裝單個新依賴項。我們讓他們一起玩得很好 ，這是一個更大的成就！