Question

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

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

在我的依赖项中，我已经安装了CSS加载器和样式加载器：

"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'

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

Answer 1

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

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

在/.css $ /

之后，从上述代码中删除i

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

如何导入外部CSS来反应文件？

1 个答案: