如何导入外部 CSS 以响应文件？答案

【问题标题】：How can I import an external CSS to react file?如何导入外部 CSS 以响应文件？
【发布时间】：2019-12-26 03:35:35
【问题描述】：

我已经搜索了一个多小时来了解如何将外部 CSS 文件连接到我的第一个网站的 NavBar.js 文件。我收到以下错误并尝试了多种解决方案，但仍然收到错误。

Module not found: Can't resolve './components/layouts/NavbarStyles.css'

在我的依赖中，我已经安装了 css loader 和 styles loader：

"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
"bootstrap": "^4.4.1",
"css-loader": "^3.4.0",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0"


"devDependencies": {
"style-loader": "^1.1.2"

我在 webpack.config.js 中添加了一个模块（大约在 330 行。在我看到的一些视频中，webpack 文件没有这么长）

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

进口：

import React from 'react'
import './components/layouts/NavbarStyles.css';

我的文件： /src/components/layouts/NavbarStyles.css

有什么想法吗？

谢谢！

编辑： 我将 navbar.js 文件上的导入更新为：'./src/components/layouts/Navbarstyles.css';

我还像下面提到的 Naman Vyas 一样更新了 webpack 中的模块，并像 Pradip 所说的那样将 CSS href 添加到了 HTML 文件中，但我仍然收到错误：Module not found: Can't resolve './src/components/layouts/NavbarStyles.css'

还有什么我可以尝试的吗？

【问题讨论】：

尝试像这样添加文件：{ test: /\.css$/, loader: "style-loader!css-loader" }
将css链接添加到放在public文件夹内的index.html文件中

标签： css reactjs

【解决方案1】：

import React from 'react';
import './src/components/layouts/NavBarStyles.css';

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

从上面的代码中删除/.css$/之后的i

尝试复制粘贴此代码或者再次检查css文件路径

【讨论】：