Why bootstrap accordion component doesn't work in my react project?
Question
I have a react project using webpack and babel.
webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
},
devServer: {
contentBase: './public',
watchContentBase: true,
watchOptions: {
ignored: /node_modules/,
},
historyApiFallback: true,
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /.(sass|scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
};
.babelrc:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": ["transform-class-properties"]
}
package.json:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production",
"start-lan": "webpack-dev-server --mode development --host 0.0.0.0"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"redux-devtools-extension": "^2.13.8",
"sass": "^1.30.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
inside root's folder I have a public folder with a html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>project</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
and a src folder with an index.js, an App.js and an App.scss:
index.js:
import App from './App';
App.js:
import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import './App.scss';
import React, { Component } from 'react'
class App extends Component {
render() {
return (
<div>
<h1>Hello, World!</h1>
<button className="btn btn-primary">Click Me!</button>
</div>
)
}
}
export default App;
ReactDOM.render(<App />, document.getElementById('root'))
App.scss:
@import "~bootstrap/scss/bootstrap";
h1 {
color: green;
}
As you can see bootstrap loads as well as h1 green color from App.scss. I am trying to create an accordion component and bootstrap classNames doesn't work.I think that I have implement bootstrap wrong. How should I add bootstrap with sass in my project and how can I make accordion bootstrap classNames work well?
1 answers
solution1
0 2020-12-28 13:47:18
I have a react project using webpack and babel.
webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
},
devServer: {
contentBase: './public',
watchContentBase: true,
watchOptions: {
ignored: /node_modules/,
},
historyApiFallback: true,
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /.(sass|scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
};
.babelrc:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": ["transform-class-properties"]
}
package.json:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production",
"start-lan": "webpack-dev-server --mode development --host 0.0.0.0"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"redux-devtools-extension": "^2.13.8",
"sass": "^1.30.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
inside root's folder I have a public folder with a html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>project</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
and a src folder with an index.js, an App.js and an App.scss:
index.js:
import App from './App';
App.js:
import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import './App.scss';
import React, { Component } from 'react'
class App extends Component {
render() {
return (
<div>
<h1>Hello, World!</h1>
<button className="btn btn-primary">Click Me!</button>
</div>
)
}
}
export default App;
ReactDOM.render(<App />, document.getElementById('root'))
App.scss:
@import "~bootstrap/scss/bootstrap";
h1 {
color: green;
}
As you can see bootstrap loads as well as h1 green color from App.scss. I am trying to create an accordion component and bootstrap classNames doesn't work.I think that I have implement bootstrap wrong. How should I add bootstrap with sass in my project and how can I make accordion bootstrap classNames work well?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.