Bootstrap：按钮样式在React / Rails / Webpacker设置中无法正确显示

Question

我有一个Rails 6和Webpacker设置的项目。我通过yarn安装了React，并配置为可与webpacker一起使用。除了Bootstap背景色为黑色外，其他所有内容似乎都可以正常使用。我花了几个小时试图找出为什么没有运气。例如，以下按钮不会以原色呈现蓝色。

buttons

/packs/stylesheets/application.scss：

<button type="button" class="btn btn-primary">Primary</button> **do not render properly**

/packs/application.js：

`@import "~bootstrap/scss/bootstrap";`

config / webpack / environment.js看起来像这样：

import 'bootstrap'
import './stylesheets/application'

非常感谢您能提供的任何帮助。预先感谢您的宝贵时间。

Answer 1

  

为什么在按钮标签中使用class属性？

应该是className，对吧？

---

此外，我正在使用这些配置（似乎与您的配置类似）并且可以完美地工作，

• 版本

  • “ @ rails / webpacker”：“ 4.2.2”
  • “引导程序”：“ ^ 4.4.1”
  • 导轨6.0.1

• 包装的项目结构，

  

• 进口

  • application.sccs

    @import "~bootstrap/scss/bootstrap";
    

  • hello_react.jsx

    import './scss/application.scss';
    

• hello_react.jsx拥有root组件

  document.addEventListener('DOMContentLoaded', () => {
      ReactDOM.render(
          <Provider store={store}>
              <App/>
          </Provider>,
          document.body.appendChild(document.createElement('div')),
      )
  })
  

• config / webpack / environment.js

  const { environment } = require('@rails/webpacker')
  
  module.exports = environment
  

• 演示

  <button type="button" className="btn btn-primary">Primary</button>
  

  

Answer 2

问题解决了！！该问题似乎与Activeadmin有关，但不确定。但是，从#= require_tree .中删除了assets/stylesheets/application.scss之后，它就可以了。