javascript - 如何使用 Webpack 将 vendor CSS 文件捆绑到 React 应用程序中？

Question

我有一些第三方库，比如 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';

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

Answer 1

1. 如果您的 vendor css 文件特定到某个组件，您可以将它们直接导入到您的组件中，如下所示:

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

2. 如果您想导入一个通用的 css 文件(例如 normalize.css)，您可以将它们导入到您的顶级 html View 中。我通常有一个 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'],
      },
...
}