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

[songyuc]

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>
  );
}

4. 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 :

[andrrms]

To import CSS you need to import like this:
import style from 'path/to/css';
then, use styles like this:
<div className={style.someClassProperty} />

In this case, you can import Bootstrap CSS from CDN on app.html <link /> to use classNames as strings, but if you want to use your own CSS or Bootstrap CSS in the right way, I strongly recommend you to do like the above.

[songyuc]

Do I need to add some loaders in the webpack.config.renderer.dev.babel.js?

[andrrms]

if you haven't deleted anyone, no.

but you need to have a css.d.ts on your components folder with the following code:

declare module '*.scss' {
  const content: { [className: string]: string };
  export default content;
}

declare module '*.css' {
  const content: { [className: string]: string };
  export default content;
}

[songyuc]

In fact, I found that the Bootstrap could work if add this line of code in app.html:
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
But, if I just use import, the Bootstrap still cannot take effect.

[songyuc]

Could you please add this feature, which can support import-style for importing .css file,
like:
import 'bootstrap/dist/css/bootstrap.min.css';

[nikita-skobov]

I also have this issue.

@andreolibr In regards to:

To import CSS you need to import like this:
import style from 'path/to/css';
then, use styles like this:
<div className={style.someClassProperty} />

How does that work for css classes with dashes in them? Because javascript cant use dashes, ie this doesnt work:

import bootstrapStyle from 'bootstrap/dist/css/bootstrap.min.css'

<div className={bootstrapStyle.no-gutters} />

Even if there's a workaround to use those types of class names (which bootstrap has a lot of)
I think it would be much more convenient to just import the entire css as is, and then do the traditional bootstrap way of:

<div className="row no-gutters" />

because bootstrap has a lot of class names that are optimized to be short, and relatively easy to remember. Basically it's nicer to write code like the above instead of:

<div className={`${bootstrapStyle.row} ${bootstrapStyle.no-gutters}`} />

[andrrms]

I actually don't know how to override this style-name problem but I was searching on internet for a solution and came across with this: https://react-bootstrap.github.io/

It can become very useful for your problem.

[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]

@andreolibr @amilajack
Yeah react bootstrap is nice. Ive used it in the past. The second link looks worth looking into, thanks.

In the mean time I have also found that I can just copy the bootstrap.min.css file into the app.global.css file and it works as exepected. (ie I can do: <div className="row no-gitters" />)

Just curious but it seems the loading behavior of app.global.css is different than other css imports like: import 'boostrap/dist/css/bootstrap.min.css, is that a configuration somewhere in the webpack config?

[amilajack]

@nikita-skobov yea, checkout the webpack render config

[songyuc]

Hi, @nikita-skobov , so what is your favourite UI style framework now?

[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.