【发布时间】：2022-01-04 11:00:45
【问题描述】：
我正在尝试在我的项目中使用 react DateTimePicker，但它似乎没有应用相应的 CSS 样式表。我已经尝试过在不同帖子中找到的不同导入方法，但似乎都没有。我会尽力为您提供我认为您可能需要的尽可能多的信息。我只是不知道如何应用 css...
我的 webpack.config.js：
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
url: false
}
}
]
})
}
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
// This has effect on the react lib size
NODE_ENV: JSON.stringify("production"),
},
}),
],
};
我在我的 js 中的导入似乎没有引发任何错误：
import DateTimePicker from "react-datetime-picker";
import "react-datetime-picker/dist/DateTimePicker.css";
import "react-calendar/dist/Calendar.css";
import "react-clock/dist/Clock.css";
在我的 index.html 中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Drivertimes</title>
{% load static %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link rel="stylesheet" type="text/css" href="{% static "css/index.css" %}"
/>
</head>
<body>
<div id="main">
<div id="app"></div>
</div>
<script src="{% static "frontend/main.js" %}"></script>
</body>
</html>
我已经尝试使用的 index.css
@import "~react-datetime-picker/dist/DateTimePicker.css" :
@import "~react-calendar/dist/Calendar.css";
@import "~react-clock/dist/Clock.css";
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#app {
width: 100%;
height: 100%;
display: flex;
}
【问题讨论】：
标签： javascript css reactjs webpack datetimepicker