How to use Bootstrap 4 and Sass (and jQuery)

JaeyoungLee edited this page May 21, 2017 · 28 revisions
  • npm install --save-dev css-loader node-sass resolve-url-loader sass-loader style-loader url-loader
  • npm install bootstrap-loader@2.0.0-beta.20 --save-dev
  • npm install jquery --save
  • npm install bootstrap@4.0.0-alpha.6 --save
  • Added autoprefixer to webpack.config.js (to use with postcss - optional):
    const autoprefixer = require('autoprefixer');

    postcss: [autoprefixer],  // this is inside module.exports object
  • Add loaders to webpack.common.js:
/*
 * Sass loader (required for Bootstrap 4)
 */
{
  test: /\.css$/,
  use: ['raw-loader']
},

{
  test: /\.scss$/,
  use: ['raw-loader', 'sass-loader']
},

/*
 * Bootstrap 4 loader
 */
{
  test: /bootstrap\/dist\/js\/umd\//,
  use: 'imports-loader?jQuery=jquery'
},

/*
 * Font loaders, required for font-awesome-sass-loader and bootstrap-loader
 */
{
  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
  test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  loader: "file-loader"
},
  • Setup webpack provides required for Bootstrap 4 in webpack.common.js (to plugins array): At the top with the others
/*
 * Webpack Plugins
 */
...
const ProvidePlugin = require('webpack/lib/ProvidePlugin'); 
// plugins: [
        
new webpack.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"
}),
  • Add to the entry section in webpack.common.js:
entry: {
  'polyfills': './client/polyfills.browser.ts',
  'twbs':      'bootstrap-loader',
  'main':      AOT ? './client/main.browser.aot.ts' :
               './client/main.browser.ts'
},
  • Add some Bootstrap markup to your index.html to see that it works.
  • If compilation fails due to some TypeError originating from the sass-loader, try setting the context in webpack.dev.js and webpack.prod.js as follows:
new LoaderOptionsPlugin({
minimize: true,
debug: false,
options: {
  // Required
  context: helpers.root('client'),
  output: {
    path: helpers.root('dist')
  }

Icon fonts

Bootstrap 4 dropped support for glyphicons, so you want to include your own icon font.

font-awesome

  • npm install --save font-awesome
  • npm install --save-dev font-awesome-sass-loader
  • Create a a file config/font-awesome.config.js with the following contents:
module.exports = {
  // fontAwesomeCustomizations: "./_font-awesome.config.scss",

  styles: {
    "mixins": true,

    "core": true,
    "icons": true,

    "larger": true,
    "path": true,
  }
};
  • Update your entry config in webpack.common.js:
entry: {
  'polyfills': './client/polyfills.browser.ts',
  'twbs':      'bootstrap-loader',
  'fa':        'font-awesome-sass-loader!./config/font-awesome.config.js',
  'main':      AOT ? './client/main.browser.aot.ts' :
               './client/main.browser.ts'
},

Tips

you got the error like this?

Could not find bootstrap version: '3'. Did you install it?

if you're use yarn

follow this

(if you have .yarnclean file ) Remove the .yarnclean file
$ yarn remove bootstrap-sass
$ yarn add bootstrap-sass

original answer : https://github.com/shakacode/bootstrap-loader/issues/279

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.