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

Question

I have a Rails 6 project set up with Webpacker & React . I installed Bootstap via yarn and is configure to work with webpacker. Everything is seems to work except buttons background color comes in a shade of black. I have spent hours trying to figure out why with no luck. For example the following button will not render in primary color blue as it should.

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

/packs/stylesheets/application.scss:

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

/packs/application.js:

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

config/webpack/environment.js looks like this:

const { environment } = require('@rails/webpacker');

const webpack = require('webpack')
environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
 })
);

environment.loaders.append("graphql", {
  test: /\.(graphql|gql)$/,
  exclude: /node_modules/,
  loader: 'graphql-tag/loader',
});

module.exports = environment;

Any help you could provide is greatly appreciated. Thank you in advance for your time.

Answer 1

Why are you using class attribute in the button-tag?

That should be className , right?

---

Moreover, I'm using these configurations(seems similar to yours) and working flawlessly,

• Versions

  • "@rails/webpacker": "4.2.2"
  • "bootstrap": "^4.4.1"
  • Rails 6.0.1

• Project-structure for packs ,

  

• Imports

  • application.sccs

     @import "~bootstrap/scss/bootstrap";

  • hello_react.jsx

     import './scss/application.scss';

• hello_react.jsx holds the root component

  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

• Demo

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

  

Answer 2

Problem resolved!! It seems like the issue was related to Activeadmin , but not sure. But, after removing #= require_tree . from assets/stylesheets/application.scss , it worked.