使用 Webpack 时无法将 CSS 链接到 JSX答案

【问题标题】：Can't link CSS to JSX while using Webpack使用 Webpack 时无法将 CSS 链接到 JSX
【发布时间】：2019-09-09 23:55:39
【问题描述】：

所以，我对 React 很陌生，我正在做一个小组项目。我在网上学习了一些教程，并且能够让一切正常工作，从头开始并自己工作。

但是，在小组项目中，我们克隆了一个使用 webpack 的 repo，并从该模板开始。当我尝试将我自己项目中的所有工作代码复制并粘贴到组项目中时，我似乎无法再将 CSS 链接到 JSX。

我已经在谷歌上搜索了几个小时，我确信这与 webpack 有关，因为我没有在我自己的版本中使用它。我尝试了一些方法，但不知道如何解决。

我还发布了 webpack.config.js 文件。（这个文件只是包含在克隆的 repo 中，我怕修改太多）。

有人可以帮帮我吗？我还不能嵌入图像，因为我刚刚注册，但这里是我得到的错误图片的链接，以及我的文件结构。我尝试将 CSS 移动到与 JSX 相同的文件夹中并更改文件路径，但无济于事。

https://imgur.com/a/uoMdSii

var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public/dist');

var APP_DIR = path.resolve(__dirname, 'app');

var config = {
  entry: APP_DIR + '/components/index.jsx',
  module: {
    loaders: [{
      test: /\.jsx$/,
      loader: 'babel',
      include: APP_DIR,
      query: {
        presets: ['es2015', 'react']
      }
    },{
      test: /\.css$/,
      loaders: [
        'style?sourceMap',
        'style-loader!css-loader',
        'style!css'
      ]
    }],
    resolve: {
        extensions: ['', '.js', '.jsx', '.css']
    }
  },
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }
};

module.exports = config; ```

【问题讨论】：

我认为链接应该是 import '../../../public/styles.css'

标签： javascript css reactjs webpack jsx

【解决方案1】：

好的，感谢您尝试提供帮助。我已经整理好了。

所以我还有一个 index.ejs 文件，所有内容都在其中运行，我必须在它的部分中像这样链接 CSS。

link rel="stylesheet" type="text/css" href="/styles.css"

因为我还有一个 app.js 文件，上面写着 app.set('public', path.join(__dirname, 'public'));

【讨论】：

【解决方案2】：

你可以尝试使用'use'关键字来代替加载器，如下所示？

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

【讨论】：

刚试过，不幸的是同样的错误仍然存在。
我假设如果 css 文件没有被解析，样式将不会被应用。你不应该得到一个错误。您的意思是未应用样式？您遇到的与 CSS 相关的具体错误是什么？
所以当我在 index.JSX 文件中取出第 3 行，然后执行“npm start”时，页面会在浏览器中加载，但没有任何样式。然后当我包含第 3 行时，我得到了找不到 CSS 模块的错误。
能不能把styles.css放到和index.jsx一样的App文件夹里，然后在index.jsx中导入为import './styles.css'试试？

【解决方案3】：

我会尝试再上一个目录：

试试：

import "./../../public/styles.css";

还有一个使用 React 导入的提示，始终以“./”开头的路径，因为这将考虑您当前的目录。 “/”将立即在您的公用文件夹中搜索。

【讨论】：

不幸的是，这不起作用。我尝试以多种不同的方式更改文件路径。即使我将 CSS 和 JSX 文件放在同一个文件夹中，它仍然不起作用。