"import 'bootstrap/dist/css/bootstrap.min.css';" doesn't work in the program

I tried using import 'bootstrap/dist/css/bootstrap.min.css to import Bootstrap, but this code doesn’t work as,

Prerequisites

• Using yarn
• Using node 10.x
• Using an up-to-date master branch
• Using latest version of devtools. See wiki for howto update
• Link to stacktrace in a Gist (for bugs)
• For issue in production release, devtools output of DEBUG_PROD=true yarn build && yarn start
• Tried solutions mentioned in #400

Note for using latest version of devtools: The command for updating extensions version cannot work on Windows PowerShell, which need to be confirmed.

Note for link to stacktrace in a Gist (for bugs): I am sorry for that, as a beginner, I don’t know how to do that.

Expected Behavior

import 'bootstrap/dist/css/bootstrap.min.css can work normally as,

Current Behavior

import 'bootstrap/dist/css/bootstrap.min.css seemed not to take effect, and it shows as,

Possible Solution

Steps to Reproduce (for bugs)

1. Git clone the electron-react-boilerplate;

2. Install Bootstrap using yarn add react-bootstrap bootstrap;

3. Change the code of HomePage.tsx as,

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

export default function HomePage() {
  return (
    <div className="container-fluid">
      <div className="row">
        <div className="col-3 bg-light left-panel">
          <h1>this is the left</h1>
        </div>
        <div className="col-9 bg-primary right-panel">
          <h1>this is the right</h1>
        </div>
      </div>
    </div>
  );
}

1. Run as yarn dev

Context

This issue make me unable to use import to use import .cssfile.

Almost not.

Your Environment

• Node version : v12.18.2
• Version or Branch used : 1.2.0
• Operating System and version : Windows 10
• Link to your project :

[amilajack]

The solution is to import bootstrap in app.global.css

Here’s an example of an app that’s using react-bootstrap and importing bootstrap’s SASS.

[nikita-skobov]

@songyuc

Well I mainly just use bootstrap for its layouts bootstrap.grid.css, everything else is a bunch of custom css. I know it’s bad, but for my needs its fine

Also, here’s what I figured out about the css loading:

In configs/webpack.config.renderer.dev.babel.js (and configs/webpack.config.renderer.prod.babel.js) there are some css loading options such as:

(Note the comments)

      // Extract all .global.css to style.css as is
      {
        test: /\.global\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: './',
            },
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      // Pipe other styles through css modules and append to style.css
      {
        test: /^((?!\.global).)*\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]__[hash:base64:5]',
              },
              sourceMap: true,
            },
          },
        ],
      },

so anything marked as .global.css will be loaded as is. and otherwise it generates a unique name to avoid collisions: localIdentName: '[name]__[local]__[hash:base64:5]', so you can have the best of both worlds 😃

What I did is copied the bootstrap min css into my actual project folder, and renamed it to end in .global.css, and now it gets loaded as is.