在ReactJs上使用Pure Bootstrap v4無效

我非常想在我的React.js應用程序上使用純Bootstrap v4。我使用create-react-app創建了我的應用程序。所以，我把Bootstrap資產放在index.html（在公共文件夾中）。在ReactJs上使用Pure Bootstrap v4無效

第一次嘗試時，它運行良好。然後，我添加了一些依賴項，如react-router-dom,react-router-config和prop-types。突然之間，它幾乎顯示了一個空白頁面。

1）項目文件夾

2）kodebaru/webpack.config.js

const path = require('path'); 

module.exports = { 
    entry: path.join(__dirname, '/client/src/index.jsx'), 

    output: { 
    path: path.join(__dirname, '/client/dist/js'), 
    filename: 'app.js', 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     include: path.join(__dirname, '/client/src'), 
     loader: 'babel-loader', 
     query: { 
      presets: ["react", "es2015"] 
     } 
     } 
    ] 
    }, 

    watch: true 
};

3）kodebaru/server.js

const express = require('express'); 
const path = require('path'); 
const app = express(); 

app.use(express.static(path.resolve(__dirname, './backend/static/'))); 
app.use(express.static(path.resolve(__dirname, './client/dist/'))); 

app.get('*', (req, res) => { 
    res.sendFile(path.resolve(__dirname, './backend/static/', 'index.html')); 
}); 

const PORT = process.env.PORT || 3500; 

app.listen(PORT,() => { 
    console.log(`App listening on port ${PORT}!`); 
});

4）kodebaru /後端/靜態/ index.html中

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Kodebaru</title> 
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css"> 
</head> 
<body> 
    <div id="root"></div> 

    <script src="/js/app.js"></script> 
</body> 
</html>

5）導致

6）警告消息

我知道有一個框架引導反應的應用程序（reactstrap）。但是，這次我想知道如何在反應應用程序中使用純引導程序v4？

來源

2017-09-08 Rido

是否有任何控制檯錯誤？什麼是HTML呈現？ – Panther

@Panther ..如果沒有任何呈現的東西，它不是 – Rido

，那麼服務器沒有發送任何數據？顯示一些小提琴或位置檢查！ – Panther

太晚了。但是，我認爲回答我自己的問題是很好的，因爲沒有人。解決方案是使用npm安裝引導程序，在index.jsx上導入引導程序，在webpack配置文件上添加jQuery,Popper.js和css loader。使用NPM

npm install [email protected]

b）進口引導上index.jsx

import 'bootstrap'; 
require('bootstrap/dist/css/bootstrap.css');

a）安裝自舉）添加jQuery和Popper.js上的WebPack

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] })

d）添加CSS裝載機上的WebPack

{ test: /\.css$/, use: ['style-loader', 'css-loader'] }

全面執行低於：

1）的索引。JSX

import React from 'react'; import { Provider } from 'react-redux'; import { createStore, applyMiddleware, compose } from "redux"; import promise from "redux-promise"; import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import { renderRoutes } from 'react-router-config'; import routes from './routes.js'; import reducers from './redux/reducers/index.js' import 'bootstrap'; require('bootstrap/dist/css/bootstrap.css'); const createStoreWithMiddleware = createStore(reducers, {}, compose(applyMiddleware(promise))); ReactDOM.render( <Provider store = {createStoreWithMiddleware}> <Router> {/* kick it all off with the root route */} {renderRoutes(routes)} </Router> </Provider>, document.getElementById('root') ); if(module.hot) { module.hot.accept('./routes.js', function() { routes(); }) }

2）webpack.config.js

const webpack = require('webpack'); const path = require('path'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './app/index.js', output: { filename: 'index_bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.jsx?$/, include: path.join(__dirname, '/app'), exclude: '/node_modules', loader: 'babel-loader', query: { presets: ["react", "es2015"], plugins: [ "transform-react-pug", "transform-react-jsx", "transform-object-rest-spread" ] } }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] } ] }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] }), new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ template: './index.html' }) ], devtool: 'cheap-module-eval-source-map', watch: true };

來源

2017-10-09 03:36:00 Rido

在ReactJs上使用Pure Bootstrap v4無效

回答

相關問題