如何从 React 中的外部模块正确加载 CSS？

Posted 2023-04-13

【中文标题】如何从 React 中的外部模块正确加载 CSS？

【英文标题】：How to properly load CSS from an external module in React?

【发布时间】：2019-08-21 07:54:24

【问题描述】：

在我的 react.js 应用程序中，我尝试使用外部模块 (React Toastify) 使用以下语句：

import  ToastContainer, toast  from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

不幸的是，这会引发以下错误：

Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .Toastify__toast-container 
|   z-index: 9999;

我猜是和 webpack 有关系，这里是我在 webpack.config.js 中的设置：

    output: 
  filename: '[name].js',
  path: path.resolve(__dirname, 'assets'),
,

devtool: production ? '' : 'source-map',

resolve: 
  extensions: [".js", ".jsx", ".json"],
,


module: 
  rules: [
    
     test: /\.jsx?$/,


      exclude: /node_modules/,



      loader: 'babel-loader',
    ,
  ],
,

;

我不确定如何解决此问题，感谢任何建议。

【问题讨论】：

webpack插件需要添加css loader

@fastAsTortoise 啊，当然——我使用的是没有声明的样板。现在可以了，非常感谢！

【参考方案1】：

在您的 webpack 配置文件中，您添加了 css 加载器测试：

module: 
  rules: [
    
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    , 
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    ,
  ],
,

别忘了用npm i -D css-loader 安装它。

更多信息在这里：https://github.com/webpack-contrib/css-loader