I'm trying to use the react DateTimePicker in my project but it does not seem to apply the corrrosponding CSS stylesheets. I've already tried different import methods which I found in different posts but none seems to work. I will try to give you as many information as i may think you could need. I just cannot figure out how to get the css applied...
My 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"),
},
}),
],
};
my imports in my js which dont seem to throw any error:
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";
my folder structure:
inside my 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>
my index.css in which I already tried to use
@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;
}