css file can't be added in ReactJS both for Bootstrap and Stylesheet
Question
I am trying to insert both my style and bootstrap in my React JS project. But I get the error: Refused to apply style from ' http://localhost:8000/bootstrap-3.3.7-dist/css/bootstrap.min.css ' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I want it to be inserted through the index.html because it's what I am used to. I know the way to insert bootstrap by npm and importing it but I still just want it to be inserted through the index.html.
Hierarchy of files
Currently the following are my codes:
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ticketing</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="./style/style.css" />
</head>
<body>
<div id="app"></div>
<script src="/app/bundle.js"></script>
</body>
</html>
WEBPACK.CONFIG.JS
var webpack = require("webpack");
var path = require("path");
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module:{
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query:{
presets: ["react", "es2015", "stage-2"]
}
}
]
}
};
module.exports = config;
2 answers
solution1
2 ACCPTED 2018-02-16 09:36:14
I think you should move the css and style folder into the src folder. Or try changing ./ to ../ .
solution2
0 2018-02-16 10:52:22
With following steps you can get it: 1st install bootstrap from npm (npm i bootstrap),
go to your app.js file add
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css' @import 'YOUR_CSS_FILE.css'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.