Я создаю приложение в реакции. После установки веб-пакета я пытаюсь добавить стиль, но он не работает.
Мое приложение. 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"
}
}