bootstrap loader issue

[maniR1990]

bootsrap loader is not loading and it throws error

`ERROR in ./node_modules/css-loader!./node_modules/resolve-url/resolve-url.js!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-lo ader/lib/bootstrap.styles.loader.js!./node_modules/bootstrap-loader/no-op.js Module build failed: module.exports = {};

^ File to import not found or unreadable: ../../app/styles/bootstrap/pre-customizations.scss. Parent style sheet: stdin in E:\Work\react\webpack\node_modules\bootstrap-loader\no-op.js (line 1, column 1)`

please correct me where i went wrong

im sharing my webpack config file. webpack.config

`var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var webpack = require('webpack'); var path = require("path"); var bootstrapEntryPoints = require('./webpack.bootstrap.config');

var isProd = process.env.NODE_ENV === 'production' // true or false var cssDev = ['style-loader', 'css-loader', 'sass-loader'] var cssProd = ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'], publicPath: '/dist' }) var cssConfig = isProd ? cssProd : cssDev; var bootstrapConfig = isProd ? bootstrapEntryPoints.prod : bootstrapEntryPoints.dev;

module.exports = {

entry:{ index:'./src/index.js', bootstrap:bootstrapConfig },

output: {
 path: path.resolve(__dirname + '/dist'),
    filename: "bundle.js"
},

module:{ rules:[ { test: /.scss$/, use: cssConfig
}, { test: /.js$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /.(jpg|jpeg|png|gif|svg)$/i,
loader: [ "file-loader?name=/images/[name].[ext]", "image-webpack-loader" ] }, { test: /.(woff2?)$/, use: 'url-loader?limit=10000&name=fonts/[name].[ext]' }, { test: /.(ttf|eot)$/, use: 'file-loader?name=fonts/[name].[ext]' }, { test:/bootstrap-sass[\/\]assets[\/\]javascripts[\/\]/, use: 'imports-loader?jQuery=jquery' } ] }, devServer: { contentBase: path.join(__dirname, "dist"), compress: true, hot: true, stats: "errors-only", port:3000, open: true, openPage:''

},

plugins: [new HtmlWebpackPlugin({ title:'React Project Demo', minify:{ collapseWhitespace:true }, hash:true, template:'./src/index.html'

}), new ExtractTextPlugin({ filename: "bundle.css", disable: !isProd, allChunks: true }), new webpack.HotModuleReplacementPlugin() ]

`}``

[Ihatetomatoes]

File to import not found or unreadable: ../../app/styles/bootstrap/pre-customizations.scss.

Make sure you have this file created.

[otmanel31]

hello i have the same issue but i don't understand where this document should be created ? i have this key "bootstrapCustomizations":"C://Users//oelkenz//Documents//tuto_reac t//tuto_webpack//app//styles//bootstrap//customizations.scss" and tuto_webpack is my project.

After some tests, may be bootstrap loader excpect a specific tree for css files and as i can see all css file are expect into <path/to/my/project/app/styles .....

full error below :

ERROR in ./node_modules/bootstrap-loader/no-op.js (./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/ loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"preBootstrapCustomizations":"C://Users//oelkenz/ /Documents//tuto_react//tuto_webpack//app//styles//bootstrap//pre-customizations.scss","bootstrapCustomizations":"C://Users//oelkenz//Documents//tuto_reac t//tuto_webpack//app//styles//bootstrap//customizations.scss","appStyles":"C://Users//oelkenz//Documents//tuto_react//tuto_webpack//app//styles//app.scss" ,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","print","glyphicons","s caffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs ","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","close","modals","tooltip ","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","p opover","scrollspy","tab","affix"],"configFilePath":"C://Users//oelkenz//Documents//tuto_react//tuto_webpack//.bootstraprc","bootstrapPath":"C://Users//oe lkenz//Documents//tuto_react//tuto_webpack//node_modules//bootstrap-sass","bootstrapRelPath":"..//bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.j s) Module build failed (from ./node_modules/sass-loader/lib/loader.js): undefined ^ File to import not found or unreadable: ../../app/styles/bootstrap/pre-customizations.scss. in C:\Users\oelkenz\Documents\tuto_react\tuto_webpack\node_modules\bootstrap-loader\no-op.js (line 2, column 1) @ ./node_modules/bootstrap-loader/no-op.js (./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_mo dules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"preBootstrapCustomizations ":"C://Users//oelkenz//Documents//tuto_react//tuto_webpack//app//styles//bootstrap//pre-customizations.scss","bootstrapCustomizations":"C://Users//oelkenz //Documents//tuto_react//tuto_webpack//app//styles//bootstrap//customizations.scss","appStyles":"C://Users//oelkenz//Documents//tuto_react//tuto_webpack// app//styles//app.scss","useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins"," print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs" ,"navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","cl ose","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown ","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"C://Users//oelkenz//Documents//tuto_react//tuto_webpack//.bootstraprc","bootstr apPath":"C://Users//oelkenz//Documents//tuto_react//tuto_webpack//node_modules//bootstrap-sass","bootstrapRelPath":"..//bootstrap-sass"}!./node_modules/bo otstrap-loader/no-op.js) 2:14-1648 21:1-42:3 22:19-1653 @ ./node_modules/bootstrap-loader/lib/bootstrap.loader.js!./node_modules/bootstrap-loader/no-op.js @ ./node_modules/bootstrap-loader/loader.js @ multi (webpack)-dev-server/client?http://localhost:9000 (webpack)/hot/dev-server.js bootstrap-loader

[otmanel31]

Ok i found where is the problem: i had some key uncommented into .bootstraprc. It's fixed. (appStyles, bootstrapCustomizations ....)

But i have an other issue of not found eot file by bootstrap loader in bootstrap-sass because of change of folders tree/path. So bootstrap-loader , for example, expected to find this eot file here =>node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot but the real path is now /bootstrap-sass/assets/fonts/ ... in bootstrap-sass So you can duplicate the fonts folder to expected path by bootstrap-loader lib or fix it into bootstrap-loader directly ... but i'm a lazy .. i choose the first option :) lol

now npm run dev and npm run prod works beautifully ;)

full error:

ERROR in ./node_modules/bootstrap-loader/no-op.js (./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/ loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":fal se,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","print","glyphicons","scaffolding","type","code","grid","tables","forms", "buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotro n","thumbnails","alerts","progress-bars","media","list-group","panels","wells","close","modals","tooltip","popovers","carousel","utilities","responsive-ut ilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath ":"C://Users//oelkenz//Documents//tuto_react//tuto_webpack//.bootstraprc","bootstrapPath":"C://Users//oelkenz//Documents//tuto_react//tuto_webpack//node_m odules//bootstrap-sass","bootstrapRelPath":"..//bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js) Module not found: Error: Can't resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot' in 'C :\Users\oelkenz\Documents\tuto_react\tuto_webpack\node_modules\bootstrap-loader' @ ./node_modules/bootstrap-loader/no-op.js (./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader .js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"st yleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","print","glyphicons","scaffolding","type","code","grid","tables","forms","butto ns","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","th umbnails","alerts","progress-bars","media","list-group","panels","wells","close","modals","tooltip","popovers","carousel","utilities","responsive-utilitie s"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"C:/ /Users//oelkenz//Documents//tuto_react//tuto_webpack//.bootstraprc","bootstrapPath":"C://Users//oelkenz//Documents//tuto_react//tuto_webpack//node_modules //bootstrap-sass","bootstrapRelPath":"..//bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js) 4:41-159 @ ./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap! ./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":[" style-loader","css-loader","sass-loader"],"styles":["mixins","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component -animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","ale rts","progress-bars","media","list-group","panels","wells","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts": ["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"C://Users//oelken z//Documents//tuto_react//tuto_webpack//.bootstraprc","bootstrapPath":"C://Users//oelkenz//Documents//tuto_react//tuto_webpack//node_modules//bootstrap-sa ss","bootstrapRelPath":"..//bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js @ ./node_modules/bootstrap-loader/lib/bootstrap.loader.js!./node_modules/bootstrap-loader/no-op.js @ ./node_modules/bootstrap-loader/loader.js @ multi (webpack)-dev-server/client?http://localhost:9000 (webpack)/hot/dev-server.js bootstrap-loader