[英]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.