不能同时在Bootstrap和样式表中添加CSS文件

Question

我试图在我的React JS项目中插入我的样式和引导程序。 但我收到错误消息：拒绝从' http：// localhost：8000 / bootstrap-3.3.7-dist / css / bootstrap.min.css '应用样式，因为其MIME类型（'text / html'）不是支持的样式表MIME类型，并且启用了严格的MIME检查。

我希望通过index.html插入它，因为这是我的习惯。 我知道通过npm插入引导程序并将其导入的方法，但我仍然只希望通过index.html插入它。

文件层次结构

目前，以下是我的代码：

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;

Answer 1

我认为您应该将css和style文件夹移到src文件夹中。 或尝试将./更改为../ 。

Answer 2

通过以下步骤，您可以获得：1st从npm安装引导程序（npm i bootstrap），

转到您的app.js文件添加

@import'../node_modules/bootstrap/dist/css/bootstrap.min.css'@import'YOUR_CSS_FILE.css'

不能同时在Bootstrap和样式表中添加CSS文件

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-02-16 09:36:14

解决方案2
0 2018-02-16 10:52:22

不能同时在Bootstrap和样式表中添加CSS文件

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-02-16 09:36:14

解决方案2 0 2018-02-16 10:52:22

解决方案1
2 已采纳 2018-02-16 09:36:14

解决方案2
0 2018-02-16 10:52:22