gowravshekar / bootstrap-webpack Goto Github PK
View Code? Open in Web Editor NEWThis project forked from bline/bootstrap-webpack
bootstrap package for webpack
License: MIT License
This project forked from bline/bootstrap-webpack
bootstrap package for webpack
License: MIT License
Any advice how to extract CSS required by this loader?
Thanks for trying to tame bootstrap's complexity!
As noted in #3, it is challenging to use this with other loaders including Babel, JSX.
Use { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },
instead of require()
bline#6 is still needed to pull in some of the loaders used by bootstrap-webpack.
Is this supposed to be compatible with Webpack 2? I am getting following error when building my app:
ERROR in ./~/bootstrap-webpack/index.js
Module not found: Error: Can't resolve './bootstrap-styles' in '/Users/leefsmp/Desktop/forge-react-template/node_modules/bootstrap-webpack'
@ ./~/bootstrap-webpack/index.js 1:0-66
@ ./src/client/index.js
@ multi webpack-hot-middleware/client ./src/client/index.js
ERROR in ./~/bootstrap-webpack/index.js
Module not found: Error: Can't resolve './bootstrap-scripts' in '/Users/leefsmp/Desktop/forge-react-template/node_modules/bootstrap-webpack'
@ ./~/bootstrap-webpack/index.js 2:0-52
@ ./src/client/index.js
@ multi webpack-hot-middleware/client ./src/client/index.js
Thanks for any hint how this should be fixed ...
Hi there,
I've managed to get plugin working successfully and responding to changes in the config file but the styles are a bit off.
Here are some examples:
- note the space between the cells - note the lack of space between the buttonsMost of it is fine though. I've compared against Bootstrap itself and the style seems fine, something else is throwing it off. If I just pull in the CSS from a CDN it all looks fine.
Here's my config:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var DIST = path.resolve(__dirname, '../dist');
var APP = path.resolve(__dirname, '../src/app');
var WEB = path.resolve(__dirname, '../src/web');
module.exports = {
entry: [
'bootstrap-webpack!./config/bootstrap.config.js',
path.resolve(APP, 'index.js')
],
output: {
path: DIST,
filename: 'scripts/bundle.js'
},
devServer: {
historyApiFallback: true,
contentBase: DIST
},
debug: true,
module: {
loaders: [
{
loader: 'babel-loader',
test: APP,
exclude: /node_modules/,
query: { presets: ['es2015', 'react'] }
},
{ test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
{ 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' },
]
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
API_HOST: JSON.stringify((process.env.API_HOST ? process.env.API_HOST : 'http://localhost:8000'))
}),
new HtmlWebpackPlugin({
title: 'Heading',
hash: true,
template: path.resolve(WEB, 'index.html'),
inject: false
})
],
devtool: 'source-map'
};
I'm using [email protected]
.
Little help?
When I have installed bootstrap-webpack, I got following unmet dependencies:
npm WARN [email protected] requires a peer of less@^2.3.1 but none was installed.
npm WARN [email protected] requires a peer of url-loader@>=0.5.5 but none was installed.
npm WARN [email protected] requires a peer of file-loader@>=0.8.1 but none was installed.
npm WARN [email protected] requires a peer of exports-loader@>=0.6.2 but none was installed.
npm WARN [email protected] requires a peer of extract-text-webpack-plugin@>=0.3.8 but none was installed.
Any idea, what can I do with this?
Thx.
I'm trying to override the .has-error .form-control
in bootstrap/less/forms.less
.
my_styles/theme/_forms.less:
.has-error {
.form-control-validation(...);
}
But it seems that the bootstrap-webpack is importing my style first and then importing the bootstrap styles. The generated css looks like:
// my style
.has-error .form-control {...}
...
// bootstrap style
.has-error .form-control {...}
First things first. I am new to webpack, so the origin of this issue might have something to do with the overall setup, but I am not sure about it so I post this issue here, since the error first occured after I tried to install and make use of bootstrap-webpack.
when compiling I get the following error:
Cannot find module 'style!css!less!./bootstrap-styles!./bootstrap.config.js'
this is my webpack.config.js:
'use strict';
const webpack = require( 'webpack' );
const bootstrap = require( 'bootstrap-webpack' );
const path = require( 'path' );
let devHost = 'http://81.14.233.246:8888';
let devPath = '/_clients/marcopolo/mopvmnews/public';
const fs = require('fs');
if (fs.existsSync('./webpack.vars.local.js')) {
const webpackConfigLocal = require( './webpack.vars.local.js' );
devHost = webpackConfigLocal.devHost;
devPath = webpackConfigLocal.devPath;
}
module.exports = {
devHost,
devPath,
debug: true,
devtool: '#eval-source-map',
context: path.join( __dirname, 'src', 'jsx' ),
resolve: {
extensions: ['', '.js', '.jsx'],
modulesDirectories: ['src/jsx', 'node_modules'],
},
entry: [
'bootstrap-webpack!./bootstrap.config.js',
'webpack/hot/dev-server',
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join( __dirname, 'public', 'assets', 'js' ),
publicPath: `${devPath}/assets/js/`,
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: /\.(woff|woff2)$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf$/,
loader: 'file-loader'
},
{
test: /\.eot$/,
loader: 'file-loader'
},
{
test: /\.svg$/,
loader: 'file-loader'
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: [ 'react-hot', 'babel' ]
},
{
test: /\.json$/,
exclude: /node_modules/,
loader: 'json-loader'
}
],
preLoaders: [
{
test: /\.jsx$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
]
},
// REPORT ONLY ERRORS
eslint: {
quiet: true
}
};
Any ideas?
this is a great project and so I recommend integrating with and syncing bs version to: https://github.com/valor-software/ng2-bootstrap
Regards,
Sean
Checkout the Ultimate Angular 2 Boorstrap App: @ http://ng2.javascriptninja.io
Source@ https://github.com/born2net/ng2Boilerplate
Hello,
first: Thanks for creating this library, it works like a charm.
I created a bootstrap.config.js
in __dir/src/bootstrap/bootstrap.config.js
with the example contents and updated my webpack.base.conf.js
to the following:
module.exports = {
entry: {
app: [
'bootstrap-webpack!./src/bootstrap/bootstrap.config.js',
'./src/main.js'
]
},
// ...
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
}
]
}
}
When I build the app, I get the following error:
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./src/bootstrap/bootstrap.config.js
Module build failed: Error: Cannot find module '/Users/arne/Developer/group/app/node_modules/eslint-loader/index.js!/Users/arne/Developer/group/app/src/bootstrap/bootstrap.config.js'
at Function.Module._resolveFilename (module.js:339:15)
at Function.Module._load (module.js:290:25)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.module.exports.pitch (/Users/arne/Developer/group/app/node_modules/bootstrap-webpack/bootstrap-scripts.loader.js:20:16)
@ ./~/bootstrap-webpack/index.loader.js!./src/bootstrap/bootstrap.config.js 2:0-225
So it seems he can't find eslint-loader
or the bootstrap.config.js
, but both files exist.
Plus when I get syntax errors on the file (when I remove the =
, i get Unexpected token {
).
I also tried prepending !
, !!
and -!
but with not effects.
Any idea how to handle this? Thanks in advance! ๐
ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module build failed: Error: Cannot find module '/Users/aroche/Code/other/aussie-schools/node_modules/babel-loader/index.js!/Users/aroche/Code/other/aussie-schools/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/aroche/Code/other/aussie-schools/node_modules/bootstrap-webpack/bootstrap-scripts.loader.js:20:16)
@ ./~/bootstrap-webpack/index.js 4:0-52
Any clues? Here's my package.json:
{
"name": "table",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "./node_modules/.bin/webpack -p --progress",
"watch": "./node_modules/.bin/webpack -p --watch --progress",
"watch-dev": "./node_modules/.bin/webpack --watch --progress",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^4.7.16",
"babel-core": "^4.7.16",
"babel-loader": "^4.2.0",
"bootstrap": "^3.3.4",
"bootstrap-webpack": "0.0.3",
"css-loader": "^0.10.1",
"event-emitter": "^0.3.3",
"file-loader": "^0.8.1",
"fixed-data-table": "^0.1.2",
"flux": "^2.0.1",
"lodash": "^3.6.0",
"papaparse": "git://github.com/mholt/PapaParse.git#master",
"react": "^0.13.1",
"style-loader": "^0.10.1",
"url-loader": "^0.5.5",
"webpack": "^1.8.4"
}
}
Hi,
I've started my project with an old version of packages and npm etc, now I'm trying to update everything and got stuck in the process. when running npm start
i'm getting the following error:
Module build failed: Error: Cannot find module 'C:\Projetos\tiger_team_webpack2\static\node_modules\babel-loader\lib\index.js??ref--8-0!C:\Projetos\tiger_team_webpack2\static\node_modules\bootstrap-webpack\bootstrap.config.js'
at Function.Module._resolveFilename (module.js:555:15)
at Function.Module._load (module.js:482:25)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at Object.module.exports.pitch (C:\Projetos\tiger_team_webpack2\static\node_modules\bootstrap-webpack\bootstrap-scripts.loader.js:20:16)
@ ./node_modules/bootstrap-webpack/index.js 2:0-59
@ ./src/index.js
@ multi bootstrap-loader webpack-hot-middleware/client ./src/index ./src
To help here is my bootstrap.config.js. Ps: I'm using them in separate configuration files
commom.config.js
const path = require('path');
const autoprefixer = require('autoprefixer');
const postcssImport = require('postcss-import');
const merge = require('webpack-merge');
const development = require('./dev.config');
const production = require('./prod.config');
require('babel-polyfill').default;
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, '../src'),
build: path.join(__dirname, '../dist'),
};
process.env.BABEL_ENV = TARGET;
const common = {
entry: [
PATHS.app,
],
output: {
path: PATHS.build,
filename: 'bundle.js',
},
resolve: {
extensions: ['', '.jsx', '.js', '.json', '.scss'],
modulesDirectories: ['node_modules', PATHS.app],
},
module: {
loaders: [{
test: /bootstrap-sass\/assets\/javascripts\//,
loader: 'imports?jQuery=jquery',
}, {
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: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-otf',
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file',
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml',
}, {
test: /\.js$/,
loaders: ['babel-loader'],
exclude: [/node_modules/,
'C:/Projetos/tiger_team_webpack2/static/node_modules/bootstrap']
}, {
test: /\.png$/,
loader: 'file?name=[name].[ext]',
}, {
test: /\.jpg$/,
loader: 'file?name=[name].[ext]',
}],
},
postcss: (webpack) => (
[
autoprefixer({
browsers: ['last 2 versions'],
})
]
),
};
if (TARGET === 'start' || !TARGET) {
module.exports = merge(development, common);
}
if (TARGET === 'build' || !TARGET) {
module.exports = merge(production, common);
}
dev.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'bootstrap-loader',
'webpack-hot-middleware/client',
'./src/index',
],
output: {
publicPath: '/dist/',
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader!sass',
},
{
test: /\.json$/,
loader: 'json-loader',
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
},
__DEVELOPMENT__: true,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
}),
],
};
prod.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: ['bootstrap-loader/extractStyles'],
output: {
publicPath: 'dist/',
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css!postcss-loader!sass',
},
{
test: /\.json$/,
loader: 'json-loader',
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
__DEVELOPMENT__: false,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
}),
],
};
I'm really stuck, any help would be great.
If any file is necessary just ask.
Tanks
Straight up with a require("bootstrap-webpack");
my browser says "ReferenceError: jQuery is not defined" with most of Bootstrap's script modules.
I've added jquery
as a dependency in package.json and this in webpack.config.js to fix it:
module: {
loaders: [
{
test: /\/bootstrap\/js\//,
loader: "imports?jQuery=jquery"
},
}
Seems like the example line does not work
{ test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
I stumbled on the same issue as : webpack-contrib/less-loader#44
This seems to work (at least it compiles)
{ test: /\.(woff|woff2)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
Trying to import the responsive-embed
less styles (available since 3.1.0), I noticed it's not listed to the bootstrap-styles.loader.js
.
Any chance it could be added?
I found that my webpack building slow down when I using bootstrap-webpack to build bootstrap. I consider if I can build bootstrap inside a "dll" bundle with bootstrap-webpack and DllPlugin, because it will save a lot of time from webpack building.
Have anybody tried this idea? Plz let me know, thanks.
bline#10 is still current. :)
I'm maintaining similar project: https://github.com/justin808/bootstrap-sass-loader
Wondering if other loaders should be peerDependencies or dependencies in package.json:
https://github.com/gowravshekar/bootstrap-webpack/blob/master/package.json#L18
"dependencies": {
"css-loader": "~0.6.3",
"less-loader": "~0.6.2",
"style-loader": "~0.6.0"
},
"peerDependencies": {
"bootstrap": ">=3.0.2"
}
Just give a code snippet of you using require() in the global namespace to avoid confusion.
When I compile my project, I get errors:
jquery.js:9077 GET file:///Users/and/devel/webpack_bootstrap/448c34a56d699c29117adc64c43affeb.woff2 net::ERR_FILE_NOT_FOUND
GET file:///Users/and/devel/webpack_bootstrap/fa2772327f55d8198301fdb8bcfc8158.woff net::ERR_FILE_NOT_FOUND
GET file:///Users/and/devel/webpack_bootstrap/e18bbf611f2a2e43afc071aa2f4e1512.ttf net::ERR_FILE_NOT_FOUND
Root folder of project is /Users/and/devel/webpack_bootstrap/
Files
448c34a56d699c29117adc64c43affeb.woff2
fa2772327f55d8198301fdb8bcfc8158.woff
e18bbf611f2a2e43afc071aa2f4e1512.ttf
are generated into /Users/and/devel/webpack_bootstrap/dist
folder after compilation.
package.json
{
"name": "Webpack_bootstrap",
"version": "1.0.0",
"description": "webpack bootstrap test",
"main": "index.js",
"scripts": {
"start": "npm run serve | npm run dev",
"serve": "./node_modules/.bin/http-server -p 8080",
"dev": "webpack-dev-server -d --progress --colors --port 8090"
},
"author": "",
"license": "ISC",
"devDependencies": {
"bootstrap": "^3.3.6",
"bootstrap-select": "^1.9.3",
"bootstrap-table": "^1.9.1",
"bootstrap-webpack": "0.0.5",
"bower-webpack-plugin": "^0.1.9",
"css-loader": "^0.23.0",
"eonasdan-bootstrap-datetimepicker": "^4.15.35",
"events": "^1.1.0",
"exports-loader": "^0.6.2",
"extract-text-webpack-plugin": "^0.9.1",
"file-loader": "^0.8.5",
"http-server": "^0.8.5",
"jquery": "^2.1.4",
"jquery-resizable-columns": "^0.2.3",
"jquery-slimscroll": "^1.3.6",
"jquery-ui": "^1.10.5",
"less": "^2.5.3",
"less-loader": "^2.2.2",
"lodash": "^3.10.1",
"moment": "^2.10.6",
"node-sass": "^3.4.2",
"object-assign": "^4.0.1",
"path": "^0.12.7",
"sass-loader": "^3.1.2",
"select2": "^4.0.1",
"select2-bootstrap-css": "^1.4.6",
"style-loader": "^0.13.0",
"svg-sprite-loader": "0.0.15",
"typeahead.js": "^0.11.1",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
}
}
webpack.config.js
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var BowerWebpackPlugin = require("bower-webpack-plugin");
var path = require('path');
module.exports = {
cache: true,
entry: {
index: './src/script/index.js'
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js',
sourceMapFilename: "[file].map"
},
debug: true,
devtool: 'source-map',
module: {
loaders: [
// **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' },
// Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack)
// loads bootstrap's css.
{
test: /\.scss$/,
loaders: [ 'style', 'css', 'sass' ]
},
{
test: /\.less$/,
loaders: [ 'style', 'css', 'less' ]
},
{
test: /\.css$/,
loaders: [ 'style', 'css']
},
{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'}
]
},
plugins: [
new BowerWebpackPlugin(),
new CommonsChunkPlugin('index', 'index.js', Infinity)
],
resolve: {
extensions: ['', '.js', '.jsx']
}
};
index.html
<!DOCTYPE html>
<html>
<head>
<title>Won</title>
</head>
<body>
<script type="text/javascript" src="./dist/index.js"></script>
<div id="content">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
src -> script -> index.js
var bootstrap = require('bootstrap-webpack');
How can i fixe this? Please help..
In the readme, can someone please take 10 secs to tell us where this line goes. If I knew, I'd do it myself! Thanks.
Hi,
I have configured bootstrap.config.js
like so:
module.exports = {
styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!less-loader'),
scripts: {
...
},
styles: {
...
}
};
and my main webpack.config.js
:
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = [
// Client build
{
...
},
// Server build
{
plugins: [
new ExtractTextPlugin("styles.css")
],
entry: ['bootstrap-webpack!./bootstrap.config.js','./server/server.jsx'],
target: 'node',
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
output: {
path: './dist',
filename: 'server.js',
},
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
plugins: ['transform-runtime'],
presets: ['react', 'es2015', 'stage-0']
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0']
}
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("css-loader")
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
// Bootstrap
{
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'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.json']
}
}
];
This actually works fine and the outputted styles.css
file includes my own CSS, plus the bootstrap CSS. However, there is an error thrown during compilation:
ERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!./~/style-loader!./~/css-loader!./~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./bootstrap.config.js
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.module.exports.pitch (/Users/dpwrussell/Checkout/ExampleApp/node_modules/extract-text-webpack-plugin/loader.js:21:9)
@ ./~/bootstrap-webpack/index.loader.js!./bootstrap.config.js 1:0-400
I found that my webpack building slow down when I using bootstrap-webpack to build bootstrap. I consider if I can build bootstrap inside a "dll" bundle with bootstrap-webpack and DllPlugin, because it will save a lot of time from webpack building.
Have anybody tried this idea? Plz let me know, thanks.
I'm trying to use the default configuration, but i'm getting this weird error
Error: Cannot find module 'client/node_modules/bootstrap-webpack/index.loader.js'
the file exists there, do you have any suggestions?
Are you supporting windows?
I got this issue: shakacode/bootstrap-sass-loader#14 regarding windows support.
require('expose?$!expose?jQuery!jquery');
plugins:[
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
]
How come url-loader and file-loader are peer dependencies? This plugin won't work without them, right? I had to install them manually in my project to get bootstrap-webpack to work.
I am getting a jQuery is not defined error when trying to use the bootstrap-webpack plugin.
Here is my webpack.config.json
module.exports = {
context: __dirname + "/src/",
entry: "./jass.js",
output: {
path: __dirname + "/dist/",
filename: "./bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{ test: /\.woff\d*$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" },
]
},
};
And here is my entry script
require("jquery");
require("bootstrap-webpack");
require('./style.css');
I have tried multiple different proposed solutions on SO but nothing seems to work. It seems that the issue is specifically in the bootstrap transition package.
This is from my bundle.js script
/* 11 */
/***/ function(module, exports, __webpack_require__) {
/* ========================================================================
* Bootstrap: transition.js v3.3.2
* http://getbootstrap.com/javascript/#transitions
* ========================================================================
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
OTransition : 'oTransitionEnd otransitionend',
transition : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false
var $el = this
$(this).one('bsTransitionEnd', function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}
$(function () {
$.support.transition = transitionEnd()
if (!$.support.transition) return
$.event.special.bsTransitionEnd = {
bindType: $.support.transition.end,
delegateType: $.support.transition.end,
handle: function (e) {
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
}
}
})
}(jQuery);
Finally here is the output when I run webpack-dev-server
webpack-dev-server --watch --hot --content-base dist/
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /home/kyle/Dev/jass/dist
Hash: 6d41dd2df232826645f1
Version: webpack 1.5.3
Time: 2721ms
Asset Size Chunks Chunk Names
f4769f9bdb7466be65088239c12046d1.eot 20127 [emitted]
e18bbf611f2a2e43afc071aa2f4e1512.ttf 45404 [emitted]
89889688147bd7575d6327160d64e760.svg 108738 [emitted]
448c34a56d699c29117adc64c43affeb.woff2 18028 [emitted]
fa2772327f55d8198301fdb8bcfc8158.woff 23424 [emitted]
./bundle.js 503429 0 [emitted] main
chunk {0} ./bundle.js (main) 471297 [rendered]
[0] ./src/jass.js 72 {0} [built]
[1] ./~/bootstrap-webpack/index.js 122 {0} [built]
[2] ./src/style.css 950 {0} [built]
[3] ./~/css-loader!./src/style.css 264 {0} [built]
[4] ./~/jquery/dist/jquery.js 247387 {0} [built]
[5] ./~/style-loader/addStyles.js 5507 {0} [built]
[6] ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js 392 {0} [built]
[7] ./~/css-loader/cssToString.js 352 {0} [built]
[8] ./~/bootstrap-webpack/~/style-loader!./~/bootstrap-webpack/~/css-loader!./~/bootstrap-webpack/~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./~/bootstrap-webpack/bootstrap.config.js 630 {0} [built]
[9] ./~/bootstrap-webpack/~/css-loader!./~/bootstrap-webpack/~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./~/bootstrap-webpack/bootstrap.config.js 148336 {0} [built]
[10] ./~/bootstrap-webpack/~/style-loader/addStyle.js 717 {0} [built]
[11] ./~/bootstrap/js/transition.js 1831 {0} [built]
[12] ./~/bootstrap/js/alert.js 2260 {0} [built]
[13] ./~/bootstrap/js/button.js 3274 {0} [built]
[14] ./~/bootstrap/js/carousel.js 7121 {0} [built]
[15] ./~/bootstrap/js/collapse.js 5979 {0} [built]
[16] ./~/bootstrap/js/dropdown.js 4696 {0} [built]
[17] ./~/bootstrap/js/modal.js 9343 {0} [built]
[18] ./~/bootstrap/js/tooltip.js 15103 {0} [built]
[19] ./~/bootstrap/js/popover.js 3278 {0} [built]
[20] ./~/bootstrap/js/scrollspy.js 4697 {0} [built]
[21] ./~/bootstrap/js/tab.js 3789 {0} [built]
[22] ./~/bootstrap/js/affix.js 4789 {0} [built]
[91] ./~/bootstrap/fonts/glyphicons-halflings-regular.eot 81 {0} [built]
[92] ./~/bootstrap/fonts/glyphicons-halflings-regular.ttf 81 {0} [built]
[93] ./~/bootstrap/fonts/glyphicons-halflings-regular.svg 81 {0} [built]
[94] ./~/bootstrap/fonts/glyphicons-halflings-regular.woff2 83 {0} [built]
[95] ./~/bootstrap/fonts/glyphicons-halflings-regular.woff 82 {0} [built]
I am wondering if you have any tips on getting this figured out. Thanks for your time and thanks for developing/maintaining this package!
-Kyle
How to include custom bootstrap theme?
I downloaded theme from https://bootswatch.com. It contains two files: bootswatch.less and variables.less.
I had placed its in app folder and imported from bootstrap.config.less
@import "./theme/lumen/variables";
@import "./theme/lumen/bootswatch";
Theme changed but it looks broken. Maybe bootswatch.less overrides bootstrap styles and should be imported last ?
There is my configuration: https://github.com/pochemuto/mortgage
my code:
var styleLoader = require('extract-text-webpack-plugin').extract(['css-loader', 'postcss-loader', 'less-loader']);
module.exports = {
styleLoader: styleLoader,
scripts: {
"alert" : true,
"button" : true,
"carousel" : true,
"dropdown" : true,
"modal" : true,
"tooltip" : true,
"popover" : true,
"tab" : true,
"affix" : true,
"collapse" : true,
"scrollspy" : true
},
styles: {
"mixins" : true,
"utilities": true,
"type" : true,
"normalize": true,
"forms" : true,
"grid": true,
"buttons" : true,
"responsive-utilities" : true,
"print" : true,
"code" : true,
"responsive-embed" : true,
"glyphicons" : true,
"images": true,
"modal" : true,
"print" : true,
"type" : true,
"code" : true,
"grid" : true,
"tables" : true,
"forms" : true,
"buttons" : true,
"responsive-utilities" : true,
"button-groups" : true,
"input-groups" : true,
"component-animations" : true,
"dropdowns" : true,
"tooltip" : true,
"popovers" : true,
"modals" : true,
"carousel" : true
}
};
ERROR in ./~/bootstrap-webpack/index.loader.js!./assets/app/common/bootstrap.config.js
Module not found: Error: Can't resolve '[object Object],[object Object],[object Object],[object Object]' in '/home/zhangfu/bitinvo_webpack/assets/app/common'
webpack4.x Webapck4 does not support 'extract-text-webpack-plugin'
Is there a better solution?
Would you mind linking to my repo in the readme. I've linked to yours for those looking for the less version. Thanks.
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.