无法在 React 应用程序中导入 CSS 样式答案

【问题标题】：Can't import css style in React application无法在 React 应用程序中导入 CSS 样式
【发布时间】：2018-09-30 07:04:27
【问题描述】：

您好，我在 React 应用程序中导入 css 有问题，我不知道我的代码有什么问题：

错误：

133:1 未捕获错误：模块解析失败：D:\src\styles\styles.css 意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型。

|*{
|     color:red;
| }
    at eval (133:1)
    at Object.<anonymous> (bundle.js:979)
    at __webpack_require__ (bundle.js:20)
    at eval (app.js?bd9c:4)
    at Object.<anonymous> (bundle.js:737)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:405)
    at __webpack_require__ (bundle.js:20)
    at bundle.js:63
    at bundle.js:66

styles.css（仅测试文件）：

*{
color:red;
}

webpack config.js：

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')
    }
};

package.json:

{
  "name": "",
  "version": "1.0.0",
  "main": "index.js",
  "author": "",
  "license": "",
  "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": "16.0.0",
    "react-dom": "16.0.0",
    "react-modal": "2.2.2",
    "style-loader": "0.18.2",
    "validator": "8.0.0",
    "webpack": "3.1.0",
    "webpack-dev-server": "2.5.1"
  }
}

.babelrc：

{
    "presets":[
        "env",
        "react"
    ],
    "plugins":[
        "transform-class-properties"   
    ]
}

app.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/styles.css';
ReactDOM.render(<App/>, document.getElementById('app'));

我不知道出了什么问题；？

【问题讨论】：

你的应用程序运行得怎么样，如果你删除css导入它是否运行成功？
我在控制台中使用 yarn run dev-server，是的，如果我删除 css 代码它会成功运行

标签： css reactjs webpack

【解决方案1】：

有几种方法可以解决这个问题。

添加到 package.json 中的“加载器”

{ test: /\.css$/, loader: "style-loader!css-loader" }

在 package.json 中添加你的“规则”

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

【讨论】：

【解决方案2】：

感谢您的回答。我不知道为什么，但是在重新启动我的电脑后，我的第一个版本突然可以工作了...... 我想我需要清理我的电脑:)

【讨论】：

【解决方案3】：

试试这个。

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$/,
          include: /node_modules/,
          use: ['style-loader', 'css-loader'],
        }]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer:{
        contentBase: path.join(__dirname, 'public')
    }
};

另外，请尝试更改您的 CSS。

body {
  background-color: red;
}

只是看看它是否有效。

【讨论】：

【解决方案4】：

尝试使用此规则：

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

【讨论】：

你能解释一下为什么会修复它吗？