Webpack2: How to Import Bootstrap CSS for React-Bootstrap to Find Its Styles

webpack2: how to import Bootstrap CSS for react-bootstrap to find its styles?

When setting modules: true in the css-loader, the CSS is locally scoped by default, but you need them to be available globally. The simplest solution is to remove modules: true entirely. You could still use modules in your own CSS files by using :local.

But if you would like to use modules, there are some workarounds to import globals.

Defining separate rules

Instead of enabling modules for all the CSS files, you can make two different rules, that match the desired files. So let's say all CSS imports from node_modules should be treated as regular (global) CSS. The rules would look like this:

{
  // For all .css files except from node_modules
  test: /\.css$/,
  exclude: /node_modules/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { modules: true } }
  ]
},
{
  // For all .css files in node_modules
  test: /\.css$/,
  include: /node_modules/,
  use: ['style-loader', 'css-loader']
}

Of course you can be more specific in what you want to include/exclude, if you don't want the entire node_modules.

Specifying loaders inline

You can specify the loaders in the import and webpack will use those over the configured ones. You would import bootstrap as follows:

import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';

This is just a quick workaround without having to change any config, but it's probably not desirable, especially when having multiple such cases.

How to include bootstrap css and js in reactjs app?

If you are new to React and using create-react-app cli setup, run the npm command below to include the latest version of bootstrap.

npm install --save bootstrap

or

npm install --save bootstrap@latest

Then add the following import statement to index.js file. (https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css)

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

or

import 'bootstrap/dist/css/bootstrap.min.css';

don't forget to use className as attribute on target elements (react uses className as attribute instead of class).

Cannot apply any Bootstrap style in using React-bootstrap library

When you want to use react-bootstrap component you need use the bootstrap-css in your code in order to encorporate the styles.

You can do this by adding the follwowing in your index.html

<link rel="stylesheet" type="text/css" href=""https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

From the react-bootstrap docs

Because React-Bootstrap doesn't depend on a very precise version of
Bootstrap, we don't ship with any included css. However, some
stylesheet is required to use these components. How and which
bootstrap styles you include is up to you, but the simplest way is to
include the latest styles from the CDN.

DOCS

React bootstrap not styling my react components

The webpack config you use is a little different from the medium article.

In the medium article, the author uses style-loader and css-loader to process css file.

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      ...
      { 
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },
      ...
    ]
  },
};

style-loader will inject the css code to <style/> tag. So that is why the tutorial work

In your webpack config, you use typings-for-css-modules-loader to load css. With this loader, you need to pass the css class variable name to className.

It means you should write the code like (simplify some code):

import * as React from "react";
import * as bs from 'bootstrap/dist/css/bootstrap.css';
import * as bst from 'bootstrap/dist/css/bootstrap-theme.css';

import { Button, Col, Row } from 'react-bootstrap';

import { Spinner } from '../shared/Spinner';

export class SigninForm extends React.Component {
  ...
  render() {
    return (
      <Row>
        <Col md={8}>
          <form className={bt["signin-form"]} onSubmit={this.handleSubmit}>
            <div className={bt["form-group"]}>
              <label htmlFor="email">Email</label>
              <input id="email" name="email" type="email" value={this.state.email} onChange={this.handleChange} />
            </div>
            <Button>Submit</Button>
          </form>
        </Col>
        <Col md={4}>
          Right Side
      </Col>
      </Row>
    );
  }
}

Pass bt[classname] to className.

I think it will work.

btw, I find another medium article using typings-for-css-modules-loader -> link.

Use bootstrap's CSS for single react-bootstrap component rather than across the whole project

Solution 1:
Bootstrap provides the option to include components selectively with scss. This requires you to have a build setup that handles scss for you, e.g. webpack, rollup or node-sass itself.

Edit: added minimal set of required scss classes. bootstrap 4.5

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/_variables";
@import "../node_modules/bootstrap/scss/_mixins";
@import "~bootstrap/scss/_carousel.scss";

The code snippet shows the main part which is required for styling the carousel. But if you have a look at the carousel.scss there are various dependencies to bootstrap functions you would have to import as well. With that it is possible to have a minimal bootstrap configuration with your required styles.

Solution 2: You might scope the component and its styles within a web component. That way the bootstrap.min.css is not leaking styles out of the carousel web component. This approach goes beyond the question and does not consider how the carousel works together with the rest of your application, as also events and JS interactions would be scoped.

Overriding react-bootstrap CSS with custom SASS

The issue is in your webpack config options for css-loader.
You are using the option for localIdentName which is meant to generate local class names in order to avoid overwriting existing classes; however, your goal is to overwrite the existing bootstrap classes and localization of your classnames is hindering you:
localIdentName: '[name]__[local]__[hash:base64:5]'

webpack.config.js (partial view):

        {
            test: /.scss$/,
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        sourceMap: true,
                        importLoaders: 1
                    }
                },
                {
                    loader: 'sass-loader'
                }
            ]
        },

Additionally, it appears that bootstrap will apply a css rule with higher specificity .navbar-inverse .navbar-brand than the one you have, so your css wouldn't be applied. If you use the same selector in your main.scss, then your style will take precedence and overwrite bootstrap's style:

main.scss

.navbar-inverse .navbar-brand {
    color: #FF0000;
}

---

Related Topics