Guide on combining vendor CSS files in a React application using Webpack

Question

Guide on combining vendor CSS files in a React application using Webpack

Incorporating third-party libraries is an essential part of my project. For example, I have Mapbox GL installed via npm, which comes with CSS files needed for its functionality.

The Mapbox GL CSS file can be found at mapbox-gl/dist/mapbox-gl.css in the node_modules directory. In my index.html file, which serves as the entry point for my React application, there is a link to a CSS file containing default styles:

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

While most CSS rules are written using CSS modules within specific React UI components, I occasionally need to import vendor CSS files like Mapbox GL. How can I import these vendor CSS files and ensure that their styles apply across the entire application?

javascript css typescript webpack css-modules

Answer 1

Answer №1

If you have vendor css files that are specific to a component, you can directly import them into the component itself. For example:
```
// Component1.js
import React from 'react';
...
import 'vendor/path/to/styles.css';
...
```
If you need to import a general css file like normalize.css, it's best to import it in your top-level HTML view. Typically, I create a JSX file that is transpiled by webpack to generate index.html. Here's how you can achieve this:
```
// index.jsx (transpiled to index.html)
<style
dangerouslySetInnerHTML={{
__html: require('!css-loader!normalize.css/normalize.css'),
}}
/>
    
```
Alternatively, if you're working with pure HTML, let webpack handle the imports for you using the html-loader

To give you an idea, here's a snippet of my webpack configuration:

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'],
      },
...
}

Answer 2

If you have vendor css files that are specific to a component, you can directly import them into the component itself. For example:
```
// Component1.js
import React from 'react';
...
import 'vendor/path/to/styles.css';
...
```
If you need to import a general css file like normalize.css, it's best to import it in your top-level HTML view. Typically, I create a JSX file that is transpiled by webpack to generate index.html. Here's how you can achieve this:
```
// index.jsx (transpiled to index.html)
<style
dangerouslySetInnerHTML={{
__html: require('!css-loader!normalize.css/normalize.css'),
}}
/>
    
```
Alternatively, if you're working with pure HTML, let webpack handle the imports for you using the html-loader

To give you an idea, here's a snippet of my webpack configuration:

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'],
      },
...
}

Guide on combining vendor CSS files in a React application using Webpack

Answer №1

Similar questions

Is it possible to achieve a smooth transition to the right using CSS

Can integers be used as keys in a JavaScript object's storage?

Acquire keys from a different residence

When the mouse leaves, the gauge chart component's size will expand

What is the best approach to modifying array elements using onChange and hooks in React?

Dynamically adding a class name to the outer element of a component

Steps to automatically set the database value as the default option in a dropdown menu

Having trouble with your website's container not wrapping properly?

Verify that the zip code provided in the input matches a record in the JSON data and extract the

Focusing on the alignment of an article tag

Utilize jQuery to enclose nested elements within a parent element

The dimensions of the box remain fixed and do not change when the screen is resized

Is there a way to use JavaScript/jQuery to randomly resize images every time the page loads

display or conceal a div when a radio button is selected

Tips for calculating the distance from the cursor position to the visible area

Load a React component in the same spot when clicked

Ignore one specific file when importing all files in Angular 7

What is the best way to align the content of a <ul> in the center while keeping the text left-aligned and setting a max-width

The ng-if directive seems to be causing issues within an ng-repeat loop when used in conjunction with bind-html

Passing data through events from a parent component to a child component in Vue.js using the $emit method