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

Question

我有一些 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 示例，并使其规则适用于应用程序？

Answer 1

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

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

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

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

3. 或者，如果你有纯 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'],
      },
...
}