![](/img/trans.png)
[英]Why my "Swiper" component doesn't work in a typescript react project?
[英]Why bootstrap accordion component doesn't work in my react project?
我有一個使用 webpack 和 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"
}
}
在根文件夾中,我有一個帶有 html 文件的公共文件夾:
<!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>
以及一個包含 index.js、App.js 和 App.scss 的 src 文件夾:
index.js:
import App from './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'))
應用程序.scss:
@import "~bootstrap/scss/bootstrap";
h1 {
color: green;
}
如您所見,引導程序加載以及來自 App.scss 的 h1 綠色。 我正在嘗試創建一個手風琴組件,但 bootstrap classNames 不起作用。我認為我實施 bootstrap 錯誤。 我應該如何在我的項目中添加帶有 sass 的引導程序以及如何使手風琴引導程序類名正常工作?
我有一個使用 webpack 和 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"
}
}
在根文件夾中,我有一個帶有 html 文件的公共文件夾:
<!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>
以及一個包含 index.js、App.js 和 App.scss 的 src 文件夾:
index.js:
import App from './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'))
應用程序.scss:
@import "~bootstrap/scss/bootstrap";
h1 {
color: green;
}
如您所見,引導程序加載以及來自 App.scss 的 h1 綠色。 我正在嘗試創建一個手風琴組件,但 bootstrap classNames 不起作用。我認為我實施 bootstrap 錯誤。 我應該如何在我的項目中添加帶有 sass 的引導程序以及如何使手風琴引導程序類名正常工作?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.