javascript - 使用 Webpack 时无法将 CSS 链接到 JSX

Question

所以，我是 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; ```

Answer 1

我会尝试再上一个目录:

尝试:

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

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