无法将 CSS 文件导入 React 项目答案

【问题标题】：Cant Import CSS files into React Project无法将 CSS 文件导入 React 项目
【发布时间】：2018-08-31 16:49:02
【问题描述】：

当我尝试导入 css 文件时，它显示加载程序丢失的错误。所以我已经安装了 css-loader 和 style-loader 包。如果我将这些包添加到 webpack.config.js 我会收到以下错误。不知道怎么解决。

ERROR in ./node_modules/css-loader!./src/index.js
Module build failed: Unknown word (1:1)

> 1 | import React from 'react';
    | ^
  2 | import ReactDOM from 'react-dom';
  3 | import {App} from './components/App';
  4 |

  @ ./src/index.js 3:14-73
  @ multi (webpack)-dev-server/client?http://localhost:8080 
  ./src/index.js

Webpack.config.js

module.exports = {
entry: [
  './src/index.js'
],
module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader","style-loader","css-loader"],            
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
output: {
  path: __dirname + '/dist',
  publicPath: '/',
  filename: 'bundle.js'
},
devServer: {
  contentBase: './dist'
}
};

我已经安装了以下依赖项

package.json

{
 "name": "Reactjs",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "start": "webpack-dev-server --config ./webpack.config.js --mode 
 development"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "babel": {
 "presets": [
  "env",
  "react",
  "stage-2"
 ]
 },
 "devDependencies": {
 "babel-core": "^6.26.0",
 "babel-loader": "^7.1.4",
 "babel-preset-env": "^1.6.1",
 "babel-preset-react": "^6.24.1",
 "babel-preset-stage-2": "^6.24.1",
 "css-loader": "^0.28.11",
 "style-loader": "^0.20.3",
 "webpack": "^4.2.0",
 "webpack-cli": "^2.0.12",
 "webpack-dev-server": "^3.1.1"
 },
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2"
 }
 }

【问题讨论】：

你的 webpack 版本是多少？
"webpack": "^4.2.0" @rohan kangale
你添加了所有babel相关的依赖吗？你也添加了 .babelrc 文件吗？
是的，我已经安装了这些依赖项并添加了 .babelrc 文件

标签： reactjs webpack webpack-style-loader

【解决方案1】：

将您的 webpack.config.js 修改为此并在您的 App 组件上导入您的 css 文件，如 import './file.css';（假设 css 文件与您的 App 组件位于同一目录中）

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],            
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },

  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
output: {
  path: __dirname + '/dist',
  publicPath: '/',
  filename: 'bundle.js'
},
devServer: {
  contentBase: './dist'
}
};

【讨论】：

【解决方案2】：

您需要为您的 webpack.config 添加一个单独的 css 规则，以便将 css 加载到您的项目中。

... rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader"] }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] ...

您正在使用 style-loader 和 css-loader 转换您的 .jsx 文件，这将引发错误。

【讨论】：