Не удается связать CSS с JSX при использовании Webpack

Question

Итак, я довольно новичок в React и занимаюсь групповым проектом.Я следил за некоторыми онлайн-уроками и смог заставить все работать нормально, начиная с нуля и работая самостоятельно.

Однако в групповом проекте мы клонировали репо, использующий веб-пакет, и начинаем сэтот шаблон.Когда я попытался скопировать и вставить весь мой рабочий код из моего собственного проекта в групповой проект, я больше не могу связать CSS с JSX.

Я уже несколько часов гуглю иЯ уверен, что это как-то связано с веб-пакетом, так как я не использовал его в своей собственной версии.Я попробовал несколько вещей, но просто не знаю, как это исправить.

Я также публикую файл webpack.config.js.(Этот файл был только что включен в клонированный репозиторий, и я боюсь слишком много с ним возиться).

Кто-нибудь может мне помочь, пожалуйста?Я пока не могу встраивать изображения, потому что я только что зарегистрировался, но здесь есть ссылка на фотографии с полученной ошибкой и моя структура файлов.Я попытался переместить 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

Можете ли вы попробовать использовать ключевое слово "use" вместо загрузчиков, как показано ниже?

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

Answer 2

Хорошо, спасибо за попытку помочь с этим.У меня все отсортировано.

Итак, у меня также есть файл index.ejs, через который все проходит, и мне пришлось связать CSS в этом разделе, как это.

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

так как у меня также есть файл app.js, который говорит app.set('public', path.join(__dirname, 'public'));

Answer 3

Я бы попробовал перейти еще на один каталог:

Попробуйте:

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

Также совет для импорта с помощью React, всегда начинайте путь с "./", так как это займетВаш текущий каталог во внимание."/" сразу же выполнит поиск в вашей общей папке.