摘要：經(jīng)常處于隨機(jī)級(jí)聯(lián)樣式表項(xiàng)目維護(hù)者的心血來(lái)潮之中，并且試圖讓項(xiàng)目編譯過(guò)程中涉及的其他庫(kù)，框架或預(yù)處理器經(jīng)常成為一場(chǎng)噩夢(mèng)。上下文中的預(yù)處理器基本上是構(gòu)建過(guò)程中的一個(gè)步驟。

來(lái)源 | 愿碼(ChainDesk.CN)內(nèi)容編輯
愿碼Slogan | 連接每個(gè)程序員的故事
網(wǎng)站 | http://chaindesk.cn

愿碼愿景 | 打造全學(xué)科IT系統(tǒng)免費(fèi)課程，助力小白用戶(hù)、初級(jí)工程師0成本免費(fèi)系統(tǒng)學(xué)習(xí)、低成本進(jìn)階，幫助BAT一線(xiàn)資深工程師成長(zhǎng)并利用自身優(yōu)勢(shì)創(chuàng)造睡后收入。
官方公眾號(hào) | 愿碼 | 愿碼服務(wù)號(hào) | 區(qū)塊鏈部落
免費(fèi)加入愿碼全思維工程師社群 | 任一公眾號(hào)回復(fù)“愿碼”兩個(gè)字獲取入群二維碼

本文閱讀時(shí)長(zhǎng)：13min

以前使用Create React App，你實(shí)際上沒(méi)有很多選項(xiàng)可以直觀地清理。經(jīng)常處于隨機(jī)級(jí)聯(lián)樣式表 （CSS）項(xiàng)目維護(hù)者的心血來(lái)潮之中，并且試圖讓項(xiàng)目編譯過(guò)程中涉及的其他庫(kù)，框架或預(yù)處理器經(jīng)常成為一場(chǎng)噩夢(mèng)。

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

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

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

更好的項(xiàng)目組織

讓我們首先清理一下我們項(xiàng)目中的目錄結(jié)構(gòu)。我們要做的就是將每個(gè)具有CSS和JavaScript代碼的組件分離到自己的文件夾中。先來(lái)創(chuàng)建NewTodo，Todo，App，TodoList，和Divider文件夾，并將它們所有相關(guān)的代碼放在其中的每一個(gè)文件夾中。

我們還需要在每個(gè)被調(diào)用的目錄中創(chuàng)建一個(gè)新文件，該文件index.js只負(fù)責(zé)導(dǎo)入和導(dǎo)出相應(yīng)的組件。例如，App索引文件（src/App/index.js）將如下所示：

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

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

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

你可以根據(jù)此模式猜測(cè)索引文件的內(nèi)容NewTodo，TodoList以及它們的Divider外觀。

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

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

import TodoList from "../TodoList";

我們不需要做任何事情，Divider因?yàn)樗且粋€(gè)沒(méi)有導(dǎo)入的組件。NewTodo 并且Todo 是類(lèi)似的類(lèi)型，所以我們也可以跳過(guò)它們。src/TodoList/TodoList.js另一方面，我們需要處理很多事情，因?yàn)樗俏覀冏罡呒?jí)別的組件之一并且進(jìn)口很多：

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

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

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

當(dāng)你重新加載你的應(yīng)用程序時(shí)，你的代碼應(yīng)該仍然正常工作，測(cè)試應(yīng)該全部通過(guò)，一切都應(yīng)該干凈利落！我們的完整項(xiàng)目結(jié)構(gòu)現(xiàn)在應(yīng)如下所示：

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模塊引入我們的應(yīng)用程序

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

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

接下來(lái)，我們將開(kāi)放src/Todo/Todo.js以利用CSS模塊。我們?cè)谖覀兊腡odo組件中創(chuàng)建了一個(gè)輔助函數(shù)cssClasses()，它返回我們應(yīng)該在組件中使用的樣式，并且我們不需要進(jìn)行更改以使所有工作與之前完全相同。我們還需要import在頂部更改我們的語(yǔ)句，因?yàn)槲覀冎孛宋募⑶艺诟淖兾覀兊腃SS加載到代碼中的方式！看看以下內(nèi)容：

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

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

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

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

.redDivider {
  border: 2px solid red;
}

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

與CSS模塊的可組合性

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

假設(shè)我們希望能夠?qū)⒛承┙M件標(biāo)記為關(guān)鍵組件而不僅僅是常規(guī)Todos。我們不想對(duì)組件做太多改變; 我們希望它繼承與所有其他Todos相同的基本規(guī)則。我們需要設(shè)置一些代碼來(lái)實(shí)現(xiàn)這一目標(biāo)。回到后面src/Todo/Todo.js，我們將進(jìn)行一些修改以允許一個(gè)名為的新?tīng)顟B(tài)屬性critical。我們將從constructor 組件開(kāi)始，我們將添加新state屬性和bind 函數(shù)標(biāo)記：

 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);
}

我們?cè)赾ritical屬性中添加一個(gè)新屬性，state 并將其設(shè)置為默認(rèn)值false。然后我們還引用了一個(gè)函數(shù)（我們還沒(méi)有編寫(xiě)）markCritical，并且我們綁定了this，因?yàn)槲覀兩院髮⒃谑录幚沓绦蛑惺褂盟＝酉聛?lái)，我們將解決這個(gè)問(wèn)題markCritical()：

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

我們還需要修改我們的cssClasses()函數(shù)，以便它可以對(duì)這個(gè)新state屬性做出反應(yīng)。為了演示CSS模塊的可組合性功能，我們將其設(shè)置classes為原來(lái)是一個(gè)空數(shù)組，然后第一個(gè)項(xiàng)目變?yōu)閏ritical或todo，取決于項(xiàng)目是否標(biāo)記為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函數(shù)中，我們將創(chuàng)建button 標(biāo)記以將項(xiàng)目標(biāo)記為critical：

  render() {
    return (
      

        {this.props.description}
        

          Mark as Done
        
        
          Remove Me
        
        
          Mark as Critical
        
      

    );
  }

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

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

要使用合成，您需要做的就是添加一個(gè)新的CSS屬性，composes并為其指定一個(gè)您希望它組成的類(lèi)名（或多個(gè)類(lèi)名）。在這種情況下，撰寫(xiě)是一種奇特的方式，它表示它繼承了其他類(lèi)名的行為，并允許您覆蓋其他類(lèi)名。在前面的例子中，我們說(shuō)的critical是一個(gè)CSS模塊類(lèi)，它由一個(gè)todo 模型作為基礎(chǔ)，并添加border 一個(gè)大的紅色虛線(xiàn)的組件，因?yàn)椋覀冎皇钦f(shuō)這意味著它是關(guān)鍵的。

像往常一樣保存并重新加載，您應(yīng)該能夠?qū)㈨?xiàng)目標(biāo)記為標(biāo)記為完成，標(biāo)記為嚴(yán)重或兩者，或通過(guò)單擊刪除我刪除它們，如以下屏幕截圖所示：

這就是我們對(duì)CSS模塊的簡(jiǎn)要介紹！在繼續(xù)之前，您還需要通過(guò)在屏幕中點(diǎn)擊U來(lái)快速更新測(cè)試快照yarn test。

SASS本質(zhì)上是具有擴(kuò)展功能支持的CSS。當(dāng)我在這里說(shuō)擴(kuò)展功能支持時(shí)，我的意思是它！SASS支持以下功能集，CSS中缺少這些功能集：

· 變量

· 嵌套

· 部分CSS文件

· 導(dǎo)入支持

· 混入

· 擴(kuò)展和繼承

· 運(yùn)算符和計(jì)算

安裝和配置SASS

好消息是，在Create React App項(xiàng)目中獲得SASS支持非常簡(jiǎn)單。我們首先需要通過(guò)yarn或安裝它npm。

$ yarn add node-sass

我們將看到它的大量輸出，但假設(shè)沒(méi)有錯(cuò)誤并且一切順利，我們應(yīng)該能夠重新啟動(dòng)我們的開(kāi)發(fā)服務(wù)器并開(kāi)始使用一些SASS。讓我們創(chuàng)建一個(gè)更通用的實(shí)用程序SASS文件，它將負(fù)責(zé)存儲(chǔ)我們想要在整個(gè)應(yīng)用程序中使用的標(biāo)準(zhǔn)化顏色，以及存儲(chǔ)整齊漸變hr模式的東西，以防我們想在其他地方使用它。

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

src/shared.scss在我們的項(xiàng)目中創(chuàng)建一個(gè)新文件，并為其提供以下主體：

$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)
);

接下來(lái)，跳轉(zhuǎn)到src/Divider/Divider.css并將文件重命名為src/Divider/Divider.scss。接下來(lái)，我們將更改對(duì)Divider.cssin 的引用src/Divider/Divider.js，如下所示：

import "./Divider.scss";

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

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

因此，我們?cè)谛碌墓蚕鞸ASS文件中導(dǎo)入src/，然后該background-image值只引用$fancy-gradient我們創(chuàng)建的變量，這意味著我們現(xiàn)在可以在需要時(shí)重新創(chuàng)建那個(gè)花哨的漸變而無(wú)需反復(fù)重寫(xiě)它。

保存并重新加載，您應(yīng)該看到?jīng)]有任何重大變化。

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

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

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

現(xiàn)在，我們應(yīng)該讓我們的SASS使用Todo組件的CSS模塊，所以讓我們開(kāi)始利用它。再次，我們需要import我們的shared文件放到此文件SASS也。請(qǐng)注意以下內(nèi)容src/Todo/Todo.module.scss：

@import "../shared";

接下來(lái)，我們需要開(kāi)始更改對(duì)各種背景顏色的引用。我們將常規(guī)Todos的背景更改為 $todo-normal。然后，我們將完成的Todo背景更改為 $todo-complete。最后，我們要將critical項(xiàng)目更改為 $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;
}

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

現(xiàn)在，我們?cè)贑reate React App項(xiàng)目中很好地集成了CSS模塊和SASS，而無(wú)需安裝單個(gè)新依賴(lài)項(xiàng)。我們讓他們一起玩得很好 ，這是一個(gè)更大的成就！