bline / bootstrap-webpack Goto Github PK
View Code? Open in Web Editor NEWdevelopment has moved to https://github.com/gowravshekar/bootstrap-webpack
License: MIT License
development has moved to https://github.com/gowravshekar/bootstrap-webpack
License: MIT License
In the README, use Usage example shows minetype
in the url loader strings, but it should be mimetype
, yes? Note the n
/m
difference.
One argument for simply using Bower with bootstrap and manual configuration is that the version of bootstrap can be configured. Any ideas on how we can get around that?
ran 'npm install --save bootstrap-webpack'
added in font/jquery dependencies in webpack.config.js
added require('bootstrap-webpack') to top of main entry js file
result
getting module not found errors like this:
Error: Cannot resolve module 'bootstrap/js/transition'
I'm not seeing a bootstrap directory within the node module itself so the path seems incorrect
ERROR in ./~/bootstrap-webpack/index.loader.js!./resources/bootstrap.config.js
Module not found: Error: Can't resolve '[object Object],[object Object],[object Object],[object Object],[object Object]'
with the configuration in bootstrap.config.js.
module.exports = {
styleLoader: require('extract-text-webpack-plugin').extract({fallback:'style-loader',use:'css-loader!postcss-loader!less-loader'}),
scripts: {
...
},
styles: {
...
}
};
I've already installed the extract-text-webpack-plugin, and i notice that, without the plugin, the configuraion could be working:
module.exports = {
styleLoader: 'style-loader!-loader!less-loader',
scripts: {
...
},
styles: {
...
}
};
I notice that the api of the extract-text-webpack-plugin changed. That's why the configuration not working?
using require("bootstrap-webpack") in my main.js.
ERROR in .//bootstrap-webpack/bootstrap-scripts.loader.js!.//bootstrap-webpack/bootstrap.config.js
Module build failed: Error: Cannot find module '/Users/me/Projects/portal/node_modules/react-hot-loader/index.js!/Users/me/Projects/portal/node_modules/jsx-loader/index.js?harmony!/Users/me/Projects/portal/node_modules/bootstrap-webpack/bootstrap.config.js'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.module.exports.pitch (/Users/me/Projects/portal/node_modules/bootstrap-webpack/bootstrap-scripts.loader.js:20:16)
@ ./~/bootstrap-webpack/index.js 4:0-52
I followed the instructions exactly from the readme and my entry.js is like so
entry.js
require('bootstrap-webpack!./bootstrap.config.js');
bootstrap.config.js
'use strict';
// ## bootstrap-webpack Configuration
module.exports = {
// ### Scripts
// Any scripts here set to false will never
// make it to the client, it's not packaged
// by webpack.
scripts: {
'transition': true,
'alert': true,
'button': true,
'carousel': true,
'collapse': true,
'dropdown': true,
'modal': true,
'tooltip': true,
'popover': true,
'scrollspy': true,
'tab': true,
'affix': true
},
// ### Styles
// Enable or disable certain less components and thus remove
// the css for them from the build.
styles: {
"mixins": true,
"normalize": true,
"print": true,
"scaffolding": true,
"type": true,
"code": true,
"grid": true,
"tables": true,
"forms": true,
"buttons": true,
"component-animations": true,
"glyphicons": true,
"dropdowns": true,
"button-groups": true,
"input-groups": true,
"navs": true,
"navbar": true,
"breadcrumbs": true,
"pagination": true,
"pager": true,
"labels": true,
"badges": true,
"jumbotron": true,
"thumbnails": true,
"alerts": true,
"progress-bars": true,
"media": true,
"list-group": true,
"panels": true,
"wells": true,
"close": true,
"modals": true,
"tooltip": true,
"popovers": true,
"carousel": true,
"utilities": true,
"responsive-utilities": true
}
};
webpackconfig.js
...
// **IMPORTANT** This is needed so that each bootstrap js file required by
// bootstrap-webpack has access to the jQuery object
// { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
{ test: require.resolve("jquery"), loader: "imports?jQuery=jquery" },
// Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack)
// loads bootstrap's css.
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff2" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
...
When I compile my page with webpack I get 3 errors for 3 fonts.
2015-07-11 22:49:28.075 (index):1 Not allowed to load local resource: file:///D:/scratchtestssetsscripts448c34a56d699c29117adc64c43affeb.woff2
2015-07-11 22:49:28.076 (index):1 Not allowed to load local resource: file:///D:/scratchtestssetsscriptsfa2772327f55d8198301fdb8bcfc8158.woff
2015-07-11 22:49:28.076 (index):1 Not allowed to load local resource: file:///D:/scratchtestssetsscriptse18bbf611f2a2e43afc071aa2f4e1512.ttf
First I don't know whats up with the missing slashes but it's looking for the files in the wrong place.
my script folder: D:/scratch/test/assets/scripts
my output folder: D:/scratch/test/public/scripts
I can see the font files at D:/scratch/test/public/scripts
I didn't find any documentation on that.
I don't understand how to start learning. Running webpack on the command line creates an empty "dist" folder. In the file browser index.html looks like the template code, as there is no main.js.
npmjs is showing bootstrap-webpack 0.0.3 published 24 days ago.
But no updates here in 11 months?
I'm trying to use a custom CSS along with bootstrap but I'm not sure which files I should be adding/ replacing and where I should be placing my CSS
I am suddenly getting these errors:
Failed to decode downloaded font: data:application/octet-stream;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICI0NDhjMzRhNTZkNjk5YzI5MTE3YWRjNjRjNDNhZmZlYi53b2ZmMiI7
login:1 OTS parsing error: invalid version tag
login:1 Failed to decode downloaded font: data:application/font-woff;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJmYTI3NzIzMjdmNTVkODE5ODMwMWZkYjhiY2ZjODE1OC53b2ZmIjs=
login:1 OTS parsing error: invalid version tag
login:1 Failed to decode downloaded font: data:application/x-font-ttf;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJlMThiYmY2MTFmMmEyZTQzYWZjMDcxYWEyZjRlMTUxMi50dGYiOw==
login:1 OTS parsing error: invalid version tag
and the Glyphicons are not showing.
Webpack config ist like this:
{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
bootstrap-webpack is loaded at the start of the application after exposing jquery:
'use strict'
... other imports ...
import 'expose?$!expose?jQuery!jquery'
... other imports ...
// make webpack import styles
import './styles/main.styl'
import 'file?name=tinymce.css!./styles/tinymce.css'
import 'bootstrap-webpack'
This is the project: https://github.com/barbalex/bb
Could this be an issue in bootstrap-webpack or am I having a different issue?
Hi,
I have an error :
Module not found: Error: Cannot resolve module 'imports'
when following the tutorial, I added the loaders and require("bootstrap-webpack") in my entry file and I have this errors :
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'imports' in /Users/hokkos/Code/ReactWebpack/node_modules/bootstrap-webpack
@ ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 1:0-34
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'imports' in /Users/hokkos/Code/ReactWebpack/node_modules/bootstrap-webpack
@ ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 2:0-29
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'imports' in /Users/hokkos/Code/ReactWebpack/node_modules/bootstrap-webpack
@ ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 3:0-30
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'imports' in /Users/hokkos/Code/ReactWebpack/node_modules/bootstrap-webpack
@ ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 4:0-32
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'imports' in /Users/hokkos/Code/ReactWebpack/node_modules/bootstrap-webpack
@ ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 5:0-32
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'imports' in /Users/hokkos/Code/ReactWebpack/node_modules/bootstrap-webpack
@ ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 6:0-32
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'imports' in /Users/hokkos/Code/ReactWebpack/node_modules/bootstrap-webpack
@ ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 7:0-29
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'imports' in /Users/hokkos/Code/ReactWebpack/node_modules/bootstrap-webpack
@ ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 8:0-31
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'imports' in /Users/hokkos/Code/ReactWebpack/node_modules/bootstrap-webpack
@ ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 9:0-31
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'imports' in /Users/hokkos/Code/ReactWebpack/node_modules/bootstrap-webpack
@ ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 10:0-33
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'imports' in /Users/hokkos/Code/ReactWebpack/node_modules/bootstrap-webpack
@ ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 11:0-27
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'imports' in /Users/hokkos/Code/ReactWebpack/node_modules/bootstrap-webpack
@ ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 12:0-29
Have you got an idea ?
There is an error when using this webpack-config file:
ERROR in .//bootstrap/fonts/glyphicons-halflings-regular.woff2/css-loader!./
Module parse failed: /Users/Clive/Git/heroku/whatsgoinontonight/node_modules/bootstrap/fonts/glyphicons-halflings-regular.woff2 Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ .//less-loader!.//bootstrap-webpack/bootstrap-styles.loader.js!./~/bootstrap-webpack/bootstrap.config.js 6:56688-56749
At last I change line:
{ test: /.woff(?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
to
{ test: /.woff2?(?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
and it works!
now all my compiled bootstrap styles are put inline to the tag... but i want my compiled scripts to be save to /dist folder
I didn't see a way to add an issue to gowravshekar/bootstrap-webpack
, so I'm opening one here in the hope that any fix ends up in the right place.
I was having a problem using text inputs with feedback (i.e., the small checkbox or x at the inside right-hand side of the input field). The icons were incorrectly appearing below the input box.
It seems that the glyphicons.less
file needs to be included before other bootstrap style files to get the desired result--at least before the forms.less
file. The upstream bootstrap repository made this change to bootstrap.less
in this commit.
By making a similar fix to bootstrap-webpack
--that is, modifying bootstrap-styles.loader.js
to put glyphicons
just after print
, everything looks normal again.
Thanks.
ERROR in .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'bootstrap/js/transition' in /Volumes/taobao/android-service/node_modules/.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack
@ .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js 1:0-34
ERROR in .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'bootstrap/js/alert' in /Volumes/taobao/android-service/node_modules/.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack
@ .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js 2:0-29
ERROR in .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'bootstrap/js/button' in /Volumes/taobao/android-service/node_modules/.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack
@ .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js 3:0-30
ERROR in .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'bootstrap/js/carousel' in /Volumes/taobao/android-service/node_modules/.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack
@ .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js 4:0-32
ERROR in .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'bootstrap/js/collapse' in /Volumes/taobao/android-service/node_modules/.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack
@ .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js 5:0-32
ERROR in .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'bootstrap/js/dropdown' in /Volumes/taobao/android-service/node_modules/.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack
@ .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js 6:0-32
ERROR in .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'bootstrap/js/modal' in /Volumes/taobao/android-service/node_modules/.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack
@ .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js 7:0-29
ERROR in .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js
Module not found: Error: Cannot resolve module 'bootstrap/js/tooltip' in /Volumes/taobao/android-service/node_modules/.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack
@ .//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap-scripts.loader.js!.//.npminstall/bootstrap-webpack/0.0.5/bootstrap-webpack/bootstrap.config.js 8:0-31
In example all works with gulp, in README with webpack, but in really it's doesn't works :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.