在 React 中對不同的路由使用不同的 CSS

Question

我需要能夠在 React 的不同路由中使用 CSS。 我更願意不使用 SASS，但如果這是唯一的解決方案，我會使用它。

我的Homepage (index.js)需要使用index.css而我的Other Page (page2.js)需要使用page2.css （示例名稱）

文件結構：

-src
  -components
  -pages
     -css
        -index.css
        -page2.css
     -index.js
     -page2.js

文件：

// src/pages/index.js
import React from 'react'
import './css/index.css'

const Homepage = () => {
  return (
    <!-- unrelated HTML -->
  )
}

export default Homepage

// src/pages/page2.js
import React from 'react'
import './css/page2.css'

const Page2 = () => {
  return (
    <!-- unrelated HTML -->
  )
}

export default Page2

看起來這應該可以正常工作，但它同時加載了兩個 CSS 個文件，它們重疊並出現故障。

我真的很想避免使用 SASS 之類的東西，如上所述。 有沒有什么辦法可以用路由來做到這一點，而不用做一些像在頁面改變時改變link標簽這樣的駭人聽聞的事情？

Answer 1

我強烈建議你使用 css 模塊，css 模塊只是普通的 css 文件，但應用於 css 標准化結構以管理頁面之間的多個 css 文件。

為此你應該：

1. 將 css 文件重命名為“homePage.module.css / page2.module.css”
2. 將每個 css 文件移動到其頁面目錄

它看起來像這樣

-src
  -components
  -pages
        -page2.js
        -page2.module.css
     -index.js
     -homePage.module.css

最后在相應頁面中導入每個 css 文件讓我知道它是否適合您。