不能同時在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