在 React 應用程式中使用 SCSS

隨著時間的流逝，Web 應用程式變得越來越複雜。它們的功能和外觀都是如此。

幾乎所有企業都瞭解其網際網路存在的重要性，因此他們願意開發具有出色設計的網站。

為了開發漂亮的網站，開發人員需要開發和維護包含應用程式外觀資訊的模板。例如，它可能會為設計應用程式指定主要顏色和次要顏色以及類似的重要值。

所有這些都可以通過常規 CSS 實現，但使用 SCSS 更容易，它擴充套件了 CSS 的所有基本功能，可以更有效地管理模板。React 也是為現代應用程式開發 UI 的最常用庫之一。

在本文中，我們想探索如何將 SCSS 與 React 結合使用。

在 React 中使用帶有 Create-React-App 的 SCSS

在 React 中使用 SCSS 最簡單的方法是建立一個 create-react-app 專案。它包含一個配置為允許你編譯 SCSS 檔案的 webpack 檔案。

根據官方 create-react-app 文件，首先，你必須使用 npm 或 yarn 等軟體包管理器來安裝 sass 軟體包。然後你可以繼續將樣式表的副檔名從常規的 style.css 更改為 style.scss。

在 Create-React-App 應用程式的檔案中匯入的任何檔案都將自動編譯為常規 CSS。

讓我們看一個例子。

import "./styles.scss";
export default function App() {
  return (
    <div className="App">
      <h1>Hello, World</h1>
    </div>
  );
}

當你匯入 styles.scss 檔案時，將自動編譯任何特定於 SCSS 的功能。

假設你要在 create-react-app 專案之外匯入和使用 SCSS 檔案。你將需要設定一個 webpack 檔案來配置編譯規則。

要了解更多資訊，請閱讀 dev.to 上的這個教程。