reactjs - Reactstrap 不渲染
问题描述
所以我正在使用 reactstrap 并且我已经安装了依赖项 Bootstrap 和 Reactstrap。我还将 CDN 粘贴到 html 文件中。
我认为问题可能出在 webpack 配置上,但我不确定。我正在尝试渲染一个按钮,但它没有显示它的样式,只有一个基本的 html 按钮。
所以这就是我所拥有的:
应用程序.jsx:
import React from 'react'
import { Button } from 'reactstrap';
class App extends React.Component {
render() {
return (
<div>
<Button></Button>
</div>
)
}
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './component/App';
//import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
索引.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>myDesk</title>
</head>
<body>
<div id='root'></div>
<!-- Main version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.min.js"></script>
<!-- All optional dependencies version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.full.min.js"></script>
</body>
</html>
Webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
entry: './assets/src/index.js'
},
output: {
path: __dirname + './assets/src/index.html',
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.(js|jsx)$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: 'assets/src/index.html'
})
]
};
包.json:
{
"name": "example",
"private": true,
"version": "0.0.0",
"description": "a Sails application",
"keywords": [],
"dependencies": {
"@sailshq/connect-redis": "^3.2.1",
"@sailshq/lodash": "^3.10.3",
"@sailshq/socket.io-redis": "^5.2.0",
"bootstrap": "^4.3.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"reactstrap": "^8.0.1",
"sails": "^1.2.3",
"sails-hook-apianalytics": "^2.0.3",
"sails-hook-organics": "^0.16.0",
"sails-hook-orm": "^2.1.1",
"sails-hook-sockets": "^2.0.0",
"sails-mongo": "^1.0.1"
},
"devDependencies": {
"eslint": "5.16.0",
"@babel/cli": "^7.5.0",
"@babel/core": "^7.5.4",
"@babel/preset-env": "^7.5.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"grunt": "1.0.4",
"html-webpack-plugin": "^3.2.0",
"htmlhint": "0.11.0",
"lesshint": "6.3.6",
"npm-run-all": "^4.1.5",
"rimraf": "^2.6.3",
"sails-hook-grunt": "^4.0.0",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"
},
"scripts": {
"start": "NODE_ENV=production node app.js",
"start:server": "nodemon app.js",
"start:client": "webpack-dev-server --mode development --open",
"test": "npm run lint && npm run custom-tests && echo 'Done.'",
"lint": "./node_modules/eslint/bin/eslint.js . --max-warnings=0 --report-unused-disable-directives && echo '✔ Your .js files look good.'",
"custom-tests": "echo \"(No other custom tests yet.)\" && echo"
},
"main": "app.js",
"repository": {
"type": "git",
"url": "git://github.com/michalruzicka/example.git"
},
"author": "michalruzicka",
"license": "",
"engines": {
"node": "^10.15"
}
}
请注意,我已经评论了 index.js 中的 import bootsrap,因为它会导致以下错误:
./assets/src/index.js 中的错误未找到模块:错误:无法解析“样式加载器”
解决方案
推荐阅读
- javascript - 如何在点击时替换当前的下拉项目
- python - 如何使用 Python Pycharm 连接到 Sybase
- c# - 在 C# 中将同步函数转换为异步函数
- c# - 如何转换为泛型
- kubernetes - 如何为 kubernetes pod 分配关联性,以便在所有广告中分发 pod?
- php - 为什么程序显示错误:array_key_exists()?
- linux - 如何运行python文件并通过nmap扫描生成的ips
- python - 从保存的模型预测值时出错
- fullcalendar - FullCalendar 5 是否仍然允许定义自定义 dayName 数组?
- javascript - Vue CLI Plugin Electron Builder 在构建时显示完整的空白屏幕