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

Question

I have some 3rd party libs, like Mapbox GL, which are installed via npm and have some CSS files they rely on in their work.

As for Mapbox GL, there is mapbox-gl/dist/mapbox-gl.css in node_modules . I have index.html which is used as the entry point for my React app and contains a link to a CSS file with some defaults.

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

All other CSS rules are provided by CSS modules, so I have a single CSS file in a React UI component folder and import it from the component like this:

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

How do I import vendor CSS files, like Mapbox GL example above and make the rules from it apply to the app?

Answer 1

1. If your vendor css files are specific to a component, you can import them directly into your component, like this:

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

2. If you want to import a general css file (such as normalize.css), you can import them into your top-level html view. I usually have a JSX file which is transpiled by webpack to index.html . So you can do this:

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

3. Or, if you have pure HTML, you can let webpack do it for you using the html-loader

---

For your reference, this is my 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'],
      },
...
}