如何使用 Webpack 将供应商 CSS 文件捆绑到 React 应用程序中？

Posted 2023-03-13

【中文标题】如何使用 Webpack 将供应商 CSS 文件捆绑到 React 应用程序中？

【英文标题】：How to bundle vendor CSS files into a React app with Webpack?

【发布时间】：2018-05-10 10:25:15

【问题描述】：

我有一些 3rd 方库，例如 Mapbox GL，它们通过 npm 安装，并有一些他们在工作中依赖的 CSS 文件。

对于 Mapbox GL，node_modules 中有 mapbox-gl/dist/mapbox-gl.css。我有 index.html，它用作我的 React 应用程序的入口点，并包含指向具有一些默认值的 CSS 文件的链接。

<link rel="stylesheet" href="/vendor/core.css">

所有其他 CSS 规则都由 CSS 模块提供，因此我在 React UI 组件文件夹中有一个 CSS 文件，并从组件中导入它，如下所示：

import * as style from './MyComponent.css';

如何导入供应商 CSS 文件，例如上面的 Mapbox GL 示例，并使其规则适用于应用程序？

【问题讨论】：

如果你已经在使用Webpack了，可以把webpack.config.js的内容放上去吗？

【参考方案1】：

如果您的供应商 css 文件是特定于某个组件的，您可以将它们直接导入到您的组件中，如下所示：

// Component1.js
import React from 'react';
...
import 'vendor/path/to/styles.css';
...

如果你想导入一个通用的 css 文件（例如 normalize.css），你可以将它们导入到你的*** html 视图中。我通常有一个 JSX 文件，它由 webpack 转译为index.html。所以你可以这样做：

// index.jsx (transpiled to index.html)
<style
  dangerouslySetInnerHTML=
    __html: require('!css-loader!normalize.css/normalize.css'),
  
/>

或者，如果你有纯 HTML，你可以让 webpack 使用 html-loader

为你做

---

供您参考，这是我的 webpack.config：

webpackConfig = 
  module: 
    rules = [
      
        // excluding for node-modules
        test: /.css$/,
        exclude: path.resolve('./node_modules'),
        use: [
          'style-loader',
          
            loader: 'css-loader',
            options: 
              modules: true,
              camelCase: true,
              importLoaders: 1,
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            ,
          ,
          'postcss-custom-loader',
        ],
      ,
      
        // only for node-modules
        test: /.css$/,
        include: path.resolve('./node_modules'),
        use: ['style-loader', 'css-loader', 'postcss-custom-loader'],
      ,
...

【讨论】：

我还是想不通。我试图将供应商 css 导入到我的组件中，即 import 'react-toastify/dist/ReactToastify.css';但是我没有在我的应用程序中获得样式，只有在我的 index.html 中使用 cdn 时才能获得它们。如果有什么问题，你能告诉我吗？ gist.github.com/foodaka/6c65b4b96d5cef1fc7f1ae6ec6e18aca