Cannot get bootstrap-sass to work with webpack
10,686
It's not straightforward but it can work without having to do json.
Start by importing boostrap-sass (installed via npm) in your main.js/ts
require("bootstrap-sass");
Or if you're using ts/ES6:
import "bootstrap-sass";
Then just import these two in the component's styles (inline or external sass/scss file in Angular 2):
@import "~bootstrap-sass/assets/stylesheets/bootstrap-sprockets"
@import "../styles/bootstrap/bootstrap"
You then need to have a folder ../styles/bootstrap with the following contents:
- variables.scss: Just copy and customise from node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
- bootstrap.scss: This is a "webpack-ified" version of the main bootstrap file:
//
@import "variables"; //this is the key to easy customisation
@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
@import "~bootstrap-sass/assets/stylesheets/~bootstrap-sass/assets/stylesheets/bootstrap/normalize";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/print";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
// Core CSS
@import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/type";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/code";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/tables";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";
// Components
@import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/navs";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/pagination";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/pager";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/labels";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/badges";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/alerts";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/media";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/list-group";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/panels";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/close";
// Components w/ JavaScript
@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel";
// Utility classes
@import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
Finally, the webpack config bit. This could be the loader:
{
test: /\.(sass|scss)$/,
loader: "file?name=[path][name].css!sass-loader"
}
And this a way to load jquery:
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
Author by
MJB
Updated on July 19, 2022Comments
-
MJB almost 2 years
Im following the instrtuctions on the bootstrap-sass-loader page
in my package.json I got
"bootstrap-sass": "^3.3.6", "bootstrap-sass-loader": "^1.0.9"
this is my webpack.config.js
module.exports = { entry: ['./app.js'], output: { publicPath: 'http://localhost:8080/', filename: 'build/bundle.js' }, devtool: 'eval', module: { /* used on code before it's transformed */ preLoaders: [ { test: /\.jsx?$/, exclude: /(node_modules)/, loader: 'source-map' } ], /* used to modify code */ loaders: [ {test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery'}, {test: /\.obj|\.mtl|\.html|\.dae|\.txt/, loader: "raw"}, {test: /\.jsx?$/, exclude: /(node_modules)/, loader: 'babel'}, {test: /\.css$/, loader: 'style-loader!css-loader'}, {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"}, {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: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}, { test: /\.scss$/, /* order from bottom to top, so first sass, autoprefix, css and finally style */ loaders: ['style', 'css', 'autoprefixer?browsers=last 3 versions', 'sass?outputStyle=expanded'] }, { test: /\.(jpe?g|png|gif|svg)$/i, loaders: ['url?limit=8192', 'img'] }, { test: /\.jsx?$/, exclude: /(node_modules)/, loader: 'babel' } ], /* used to modify generated code */ postLoader: [] } };
as far as I understand I just have to use
require("bootstrap-sass-loader");
in my
app.js
and be done. but I cannot use any bootstrap styles. what am I missing here?