# Bootstrap 4
npm install --save-dev [email protected]
# Node SASS & other loaders needed to handle styles
npm install --save-dev css-loader node-sass resolve-url-loader sass-loader style-loader url-loader postcss-loader
And install bootstrap-loader; if we aren't put the specific version number. It will download the exports.1 version which will make a problem.
npm install --save-dev [email protected]
Make sure that you got [email protected] in the package.json
src/vender.browser.ts:
Import the bootstrap-loader, font-awesome-loader in a vender file.
...
import 'bootstrap-loader';
import 'font-awesome-loader';
if ('production' === ENV) {
// Production
} else {
// Development
}
config/webpack.common.js:
/*
* Webpack Plugins
*/
...
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const autoprefixer = require('autoprefixer');
...
{
test: /\.css$/,
use: ['to-string-loader', 'css-loader']
},
{
test: /\.scss$/,
loader: extractTextPlugin.extract('style', 'css-loader?postcss-loader!sass-loader')
},
{
test: /\.scss$/,
include: helpers.root('src/app'),
loader: 'raw-loader!postcss-loader!sass-loader'
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
loader: 'file-loader'
},
// Bootstrap 4
{
test: /bootstrap\/dist\/js\/umd\//,
loader: 'imports-loader?jQuery=jquery'
},
...
/**
* Plugin LoaderOptionsPlugin (experimental)
*
* See: https://gist.github.com/sokra/27b24881210b56bbaff7
*/
new LoaderOptionsPlugin({
postcss: [autoprefixer],
}),
new ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Tether: "tether",
"window.Tether": "tether",
Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
Button: "exports-loader?Button!bootstrap/js/dist/button",
Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
Util: "exports-loader?Util!bootstrap/js/dist/util"
}),
...
scss usage:
@Component({
...
styles: ['./course.component.scss'],
})
config/webpack.dev.js | config/webpack.prod.js:
The original file content should look like this
...
/**
* Plugin LoaderOptionsPlugin (experimental)
*
* See: https://gist.github.com/sokra/27b24881210b56bbaff7
*/
new LoaderOptionsPlugin({
debug: true,
options: {
}
}),
...
After put some configuration. These are the workaround fixed for an error like Path must be a string. Received undefined.
new LoaderOptionsPlugin({
debug: true,
options: {
context: helpers.root(),
output: {
path: helpers.root('dist')
},
},
sassLoader: {
includePaths: [helpers.root(__dirname, 'src', 'scss')]
},
}),
Create .bootstraprc:
Create the file beside the src folder. This is the content in my project.
---
# Output debugging info
# loglevel: debug
# Major version of Bootstrap: 3 or 4
bootstrapVersion: 4
scriptsPath: ['js', 'dist']
# If Bootstrap version 4 is used - turn on/off flexbox model
useFlexbox: true
# Webpack loaders, order matters
styleLoaders:
- style-loader
- css-loader
- postcss-loader
- sass-loader
# Extract styles to stand-alone css file
# Different settings for different environments can be used,
# It depends on value of NODE_ENV environment variable
# This param can also be set in webpack config:
# entry: 'bootstrap-loader/extractStyles'
extractStyles: false
# env:
# development:
# extractStyles: false
# production:
# extractStyles: true
# Customize Bootstrap variables that get imported before the original Bootstrap variables.
# Thus, derived Bootstrap variables can depend on values from here.
# See the Bootstrap _variables.scss file for examples of derived Bootstrap variables.
#
# preBootstrapCustomizations: ./path/to/bootstrap/pre-customizations.scss
# This gets loaded after bootstrap/variables is loaded
# Thus, you may customize Bootstrap variables
# based on the values established in the Bootstrap _variables.scss file
#
# bootstrapCustomizations: ./path/to/bootstrap/customizations.scss
# Import your custom styles here
# Usually this endpoint-file contains list of @imports of your application styles
#
# appStyles: ./path/to/your/app/styles/endpoint.scss
### Bootstrap styles
styles:
# Mixins
mixins: true
# Reset and dependencies
normalize: true
print: true
# Core CSS
reboot: true
type: true
images: true
code: true
grid: true
tables: true
forms: true
buttons: true
# Components
animation: true
dropdown: true
button-group: true
input-group: true
custom-forms: true
nav: true
navbar: true
card: true
breadcrumb: true
pagination: true
jumbotron: true
alert: true
progress: true
media: true
list-group: true
responsive-embed: true
close: true
tags: true
# Components w/ JavaScript
modal: true
tooltip: true
popover: true
carousel: true
# Utility classes
utilities: true
### Bootstrap scripts
scripts:
alert: true
button: true
carousel: true
collapse: true
dropdown: true
modal: true
popover: true
scrollspy: false
tab: true
tooltip: true
util: true
Reference: