Question

我试图用CSS文件设置App组件的样式，但是每次抛出错误说明

模块解析失败：意外令牌（1：0）您可能需要适当的加载程序来处理此文件类型。

我已经安装了css-loader和style-loader，并且已经在webpack.config.js文件中进行了配置。我还运行了命令npm install --save -dev css-loader style-loader，但是在package.json文件中，两者都出现在依赖项中，而不是在devDependencies中。

我的package.json：

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "style-loader": "^0.23.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  },
  "devDependencies": {
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0"
  }
}

webpack.config.js部分：

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

错误日志：

ERROR in (webpack)-dev-server/client?http://localhost
Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\brew\Documents\reactApp\node_modules\webpack-dev-server\client\index.js'
 @ multi (webpack)-dev-server/client?http://localhost ./src main[0]

ERROR in ./src/app.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .app{
|     color: maroon;
|     font-size: 10px;
 @ ./src/App.js 20:0-19
 @ ./src/index.js

如何使用CSS设置react组件的样式？

0 个答案: