反応スリングショットで働いているブートストラップv4を取得できません

Question

私は反応アプリケーションをビルドするために反応スリングショットを使用していますが、私はそれにブートストラップv4を統合しようとしています。

は、これまでのところ私は、次のエラー

ERROR in ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js 
Module build failed: Error: 
Could not find bootstrap version: '3'. Did you install it? 
The package is 'bootstrap' for bootstrap v4 and 'bootstrap-sass' for v3. 

    at Object.module.exports.pitch (/Users/ryannealmes/sites/work/andromeda/node_modules/bootstrap-loader/lib/bootstrap.loader.js:143:11) 
@ ./~/bootstrap-loader/loader.js 6:17-61 
Child html-webpack-plugin for "index.html": 

を取得しています

import webpack from 'webpack'; 
import HtmlWebpackPlugin from 'html-webpack-plugin'; 
import autoprefixer from 'autoprefixer'; 
import path from 'path'; 

export default { 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    debug: true, 
    devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool 
    noInfo: true, // set to false to see a list of every file being bundled. 
    entry: [ 
    'bootstrap-loader', 
    './src/webpack-public-path', 
    'webpack-hot-middleware/client?reload=true', 
    path.resolve(__dirname, 'src/index.js') // Defining path seems necessary for this to work consistently on Windows machines. 
    ], 
    target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test 
    output: { 
    path: path.resolve(__dirname, 'dist'), // Note: Physical files are only output by the production build task `npm run build`. 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
    $: "jquery", 
    jQuery: "jquery", 
    "window.jQuery": "jquery", 
    Tether: "tether", 
    "window.Tether": "tether", 
    Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip", 
    Alert: "exports?Alert!bootstrap/js/dist/alert", 
    Button: "exports?Button!bootstrap/js/dist/button", 
    Carousel: "exports?Carousel!bootstrap/js/dist/carousel", 
    Collapse: "exports?Collapse!bootstrap/js/dist/collapse", 
    Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown", 
    Modal: "exports?Modal!bootstrap/js/dist/modal", 
    Popover: "exports?Popover!bootstrap/js/dist/popover", 
    Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy", 
    Tab: "exports?Tab!bootstrap/js/dist/tab", 
    Util: "exports?Util!bootstrap/js/dist/util", 
    }), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom) 
     __DEV__: true 
    }), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new HtmlWebpackPlugin({  // Create HTML file that includes references to bundled CSS and JS. 
     template: 'src/index.ejs', 
     minify: { 
     removeComments: true, 
     collapseWhitespace: true 
     }, 
     inject: true 
    }) 
    ], 
    module: { 
    loaders: [ 
     { test: /bootstrap.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' }, 
     {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel']}, 
     {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'}, 
     {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff"}, 
     {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, 
     {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}, 
     {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'}, 
     {test: /\.ico$/, loader: 'file?name=[name].[ext]'}, 
     {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']}, 
    ] 
    }, 
    postcss:()=> [autoprefixer] 
}; 

と

のように見えるWebPACKのファイルを持っている

{ 
    "name": "react-slingshot", 
    "version": "5.0.0", 
    "description": "Starter kit for creating apps with React and Redux", 
    "engines": { 
    "npm": ">=3" 
    }, 
    "scripts": { 
    "preinstall": "node tools/nodeVersionCheck.js", 
    "setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js", 
    "remove-demo": "babel-node tools/removeDemo.js", 
    "start-message": "babel-node tools/startMessage.js", 
    "prestart": "npm-run-all --parallel start-message remove-dist", 
    "start": "npm-run-all --parallel test:watch open:src lint:watch", 
    "open:src": "babel-node tools/srcServer.js", 
    "open:dist": "babel-node tools/distServer.js", 
    "lint": "esw webpack.config.* src tools --color", 
    "lint:watch": "npm run lint -- --watch", 
    "clean-dist": "npm run remove-dist && mkdir dist", 
    "remove-dist": "rimraf ./dist", 
    "prebuild": "npm run clean-dist && npm run lint && npm run test", 
    "build": "babel-node tools/build.js && npm run open:dist", 
    "test": "mocha tools/testSetup.js \"src/**/*.spec.js\" --reporter progress", 
    "test:cover": "babel-node node_modules/isparta/bin/isparta cover --root src --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" --reporter progress", 
    "test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root src --report lcovonly _mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js", 
    "test:watch": "npm run test -- --watch", 
    "open:cover": "npm run test:cover && open coverage/index.html" 
    }, 
    "author": "Cory House", 
    "license": "MIT", 
    "dependencies": { 
    "bootstrap": "4.0.0-alpha.4", 
    "bootstrap-loader": "2.0.0-beta.12", 
    "imports-loader": "0.6.5", 
    "jquery": "3.1.1", 
    "moment": "2.15.1", 
    "object-assign": "4.1.0", 
    "react": "15.3.1", 
    "react-addons-transition-group": "15.3.2", 
    "react-dom": "15.3.1", 
    "react-redux": "4.4.5", 
    "react-router": "2.7.0", 
    "react-router-redux": "4.0.5", 
    "reactstrap": "3.3.2", 
    "redux": "3.5.2", 
    "redux-thunk": "2.1.0", 
    "tether": "1.3.7" 
    }, 
    "devDependencies": { 
    "autoprefixer": "6.4.0", 
    "babel-cli": "6.14.0", 
    "babel-core": "6.14.0", 
    "babel-loader": "6.2.5", 
    "babel-plugin-react-display-name": "2.0.0", 
    "babel-plugin-transform-react-constant-elements": "6.9.1", 
    "babel-plugin-transform-react-remove-prop-types": "0.2.9", 
    "babel-preset-latest": "6.14.0", 
    "babel-preset-react": "6.11.1", 
    "babel-preset-react-hmre": "1.1.1", 
    "babel-preset-stage-1": "6.13.0", 
    "babel-register": "6.14.0", 
    "bootstrap": "4.0.0-alpha.4", 
    "browser-sync": "2.14.0", 
    "chai": "3.5.0", 
    "chalk": "1.1.3", 
    "connect-history-api-fallback": "1.3.0", 
    "coveralls": "2.11.12", 
    "cross-env": "2.0.1", 
    "css-loader": "0.24.0", 
    "enzyme": "2.4.1", 
    "eslint": "3.4.0", 
    "eslint-plugin-import": "1.14.0", 
    "eslint-plugin-jsx-a11y": "2.2.0", 
    "eslint-plugin-react": "6.2.0", 
    "eslint-watch": "2.1.14", 
    "extract-text-webpack-plugin": "1.0.1", 
    "file-loader": "0.9.0", 
    "html-webpack-plugin": "2.22.0", 
    "isparta": "4.0.0", 
    "mocha": "3.0.2", 
    "mockdate": "1.0.4", 
    "node-sass": "3.8.0", 
    "npm-run-all": "3.0.0", 
    "open": "0.0.5", 
    "postcss-loader": "0.11.0", 
    "prompt": "1.0.0", 
    "react-addons-test-utils": "15.3.1", 
    "redux-immutable-state-invariant": "1.2.3", 
    "replace": "0.3.0", 
    "resolve-url-loader": "1.6.0", 
    "rimraf": "2.5.4", 
    "sass-loader": "4.0.0", 
    "sinon": "1.17.5", 
    "sinon-chai": "2.8.0", 
    "style-loader": "0.13.1", 
    "url-loader": "0.5.7", 
    "webpack": "1.13.2", 
    "webpack-dev-middleware": "1.6.1", 
    "webpack-hot-middleware": "2.12.2", 
    "webpack-md5-hash": "0.0.5" 
    }, 
    "keywords": [ 
    "react", 
    "reactjs", 
    "react-router", 
    "hot", 
    "reload", 
    "hmr", 
    "live", 
    "edit", 
    "webpack", 
    "redux", 
    "flux", 
    "boilerplate", 
    "starter" 
    ], 
    "repository": { 
    "type": "git", 
    "url": "https://github.com/coryhouse/react-slingshot" 
    } 
} 

のように見えるpackage.jsonファイルを持っています

私は周りにグーグルでこれについて多くの答えを見つけましたが、どれも働いていません。誰もが私はbootstrapのv4のjavascriptを取得するために探している必要がありますdirecitonで私を指すことができます反応slingshotのために働いています。

Answer 1

ブートストラップv3またはv4を使用しようとしていますか？あなたがさらに"bootstrapVersion": 3を持つプロジェクトルートに.bootstraprcを追加する必要がある場合は、v4がインストールされています。

また、./src/webpack-public-pathの下にあるエントリのbootstrap-loaderを下に移動すると、このファイルがアイコンフォントへの相対パスを修正するため、このファイルを修正します。これは主にブートストラップ3の問題でしたが、最初にリストになければ悪影響を及ぼす可能性があります。

source