javascript - 如何在 React 組件中導入 CSS 文件

我想將一個 CSS 文件導入到一個 React 元件中。

我嘗試過 import disabledLink from "../../../public/styles/disabledLink"; 但是我得到下面的錯誤；

模組未找到：錯誤：無法解析 '檔案' 或 '目錄' ../../../public/styles/disabledLink 在 c:\Users\User\Documents\pizza-app\client\src\components @ ./client/src/components/ShoppingCartLink.js 19:20-66 哈希值：2d281bb98fe0a961f7c4 版本：webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css 是我正嘗試加載的 CSS 文件的位置。

對我來說，似乎 import 沒有查找正確的路徑。

我以為使用 ../../../ 它會開始向上查找三層資料夾的路徑。

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js 是應該匯入 CSS 檔案的檔案位置。

我做錯了什麼，我該如何修正？

答案＃1

如果不需要的話，你甚至不必為它命名：

例如

import React from 'react';
import './App.css';

在這裡查看完整範例（將 JSX 即時編譯器構建為 React 組件）。

答案＃2

在使用 webpack 創建捆綁包時，你需要使用 css-loader。

安裝它：

npm install css-loader --save-dev

並將其添加到你的 webpack 配置中的 loaders 中：

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      // ...
    ]
  }
};

之後，你將能夠在 js 中包含 css 文件。

答案＃3

我建議使用 CSS 模組：

React

import React from 'react';
import styles from './table.css';

export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
                <div className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;
    }
}

呈現元件：

<div class="table__table___32osj">
    <div class="table__row___2w27N">
        <div class="table__cell___2w27N">A0</div>
        <div class="table__cell___1oVw5">B0</div>
    </div>
</div>

答案＃4

以下在 React 組件中導入外部 CSS 文件，並將 CSS 規則輸出到網站的 <head /> 中。

1. 安裝 Style Loader 和 CSS Loader：

npm install --save-dev style-loader
npm install --save-dev css-loader

2. 在 webpack.config.js 中：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

3. 在組件文件中：

import './path/to/file.css';