Question

你好我在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'));

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

Answer 1

尝试使用此规则：

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

Answer 2

试试这个。

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

看它是否有效。

Answer 3

你可以通过几种方式来解决这个问题。

添加到您的＆＃34;装载机＆＃34;在package.json中

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

添加到您的＆＃34;规则＆＃34;在package.json中

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

Answer 4

感谢您的回答。我不知道为什么但是在重新安装我的电脑之后，我的第一个版本突然间它正在工作...... 我想我需要清理我的电脑：）

无法在React应用程序中导入css样式

4 个答案: