Попытка импортировать мой css файл в реакции, но он не работает - PullRequest
0 голосов
/ 03 февраля 2020

Я создаю приложение в реакции. После установки веб-пакета я пытаюсь добавить стиль, но он не работает.

Мое приложение. js:

import React from 'react'
import ReactDOM from 'react-dom'
import IndecisionApp from './components/IndecisionApp'
import './styles/styles.css'

ReactDOM.render(<IndecisionApp />, document.getElementById('app'))

Мой webpack.config

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

style. css file

* {
  color: red;
}

app. js и папка styles находятся в одной папке. Разве это не должно работать?

Кстати, я не получаю никаких ошибок или чего-либо еще.

EDIT

Ошибка в терминале (новое редактирование: исправлена ​​эта ошибка, но изначально проблема все еще не решена)

ERROR in ./src/styles/styles.css
Module parse failed: C:\Users\Jossif\Desktop\Projects\react-course-projects\indecision-app\r-08-04-refactor\src\styles\styles.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| * {
|   color: red;
| }
 @ ./src/app.js 15:0-30
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/app.js

Мой файл webpack.config

const path = require('path')

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public')
  }
}

Мой пакет. json Файл

{
  "name": "indecision-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Andrew Mead",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "dev-server": "webpack-dev-server"
  },
  "dependencies": {
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.4",
    "live-server": "^1.2.0",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-modal": "2.2.2",
    "style-loader": "0.18.2",
    "validator": "8.0.0",
    "webpack": "3.1.0",
    "webpack-dev-server": "2.5.1"
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...