请问一下，为什么我这里使用了bootsrap的样式，但是没有效果呢？

Question

张老师，您好，在我这里用了bootstrap的样式，但是好像没有效果，

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

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

请问一下，这个该怎么解决呢？

Answer 1

张轩 2020-07-16 23:12:22

同学你好 看了你的提问和代码 原来你使用的  electron-react-boilerplate，我的项目中都使用的 create-react-app ，它的webpack 配置直接支持 css 文件的 import。但是你采用的脚手架好像不支持直接 css 文件的 import，这里有一个解决方案，正是你需要的，也是在它们的 issue 中找到的。

https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/468

// 在 app.global.css 中，使用波浪线
@import '~semantic-ui-css/semantic.min.css';

同学你在 github 提问的非常棒，英文水平不错，我很喜欢这种尝试主动寻找答案的行为，给你点赞！

• 提问者 慕慕0439991 #1

  好的，感谢张老师的帮助和鼓励！
  我会继续努力学习的！

Answer 2

张轩 2020-07-14 23:07:17

同学你好 请问 bootstrap 是否安装成功了呢？可以查看一下 node_modules 下是否有对应这个路径的文件 “bootstrap/dist/css/bootstrap.min.css”

• 提问者 慕慕0439991 #1

  是有这个文件的，我是用“yarn add”方法进行安装的，

• 张轩 回复 提问者 慕慕0439991 #2

  同学你好 可否用 inspector 检查一下 boostrap 一些类是否有对应的样式代码。比如 container-fluid，row, col 等。如果发现都没有对应的样式，需要请你提供一下源代码，我在本地看一下哈

• 提问者 慕慕0439991 回复 张轩 #3

  请稍等，我把源码上传到百度云，

点开查看后面2条评论