Support Bootstrap 4

README.md

@@ -1,3 +1,7 @@
+**Important:** This is still the readme of [shakacode/bootstrap-sass-loader](https://github.com/shakacode/bootstrap-sass-loader), the Bootstrap 3 (!) Sass package. Since this package for Bootstrap 4 is based on bootstrap-sass-loader most of the readme should be up to date nonetheless.
+
+Make sure to load a version of Bootstrap 4 (e. g. `"bootstrap": "twbs/bootstrap#v4-dev"`) instead of Bootstrap 3 Sass (`"bootstrap-sass": "~3.3.1"`).
+
 bootstrap-sass-loader
 =================
 

bootstrap-sass-no-customizations.config.js → bootstrap-no-customizations.config.js

@@ -3,62 +3,61 @@ module.exports = {
   styleLoader: 'style-loader!css-loader!sass-loader',
 
   scripts: {
-    'transition': true,
+    'util': true,
     'alert': true,
     'button': true,
     'carousel': true,
     'collapse': true,
     'dropdown': true,
     'modal': true,
-    'tooltip': true,
-    'popover': true,
     'scrollspy': true,
     'tab': true,
-    'affix': true
+    'tooltip': true,
+    'popover': true
   },
   styles: {
     'mixins': true,
 
     'normalize': true,
     'print': true,
-    'glyphicons': true,
 
-    'scaffolding': true,
+    'reboot': true,
     'type': true,
+    'images': true,
     'code': true,
     'grid': true,
     'tables': true,
     'forms': true,
     'buttons': true,
 
-    'component-animations': true,
-    'dropdowns': true,
-    'button-groups': true,
-    'input-groups': true,
-    'navs': true,
+    'animation': true,
+    'dropdown': true,
+    'button-group': true,
+    'input-group': true,
+    'custom-forms': true,
+    'nav': true,
     'navbar': true,
-    'breadcrumbs': true,
+    'card': true,
+    'breadcrumb': true,
     'pagination': true,
     'pager': true,
     'labels': true,
-    'badges': true,
     'jumbotron': true,
-    'thumbnails': true,
-    'alerts': true,
-    'progress-bars': true,
+    'alert': true,
+    'progress': true,
     'media': true,
     'list-group': true,
-    'panels': true,
-    'wells': true,
     'responsive-embed': true,
     'close': true,
 
-    'modals': true,
+    'modal': true,
     'tooltip': true,
-    'popovers': true,
+    'popover': true,
     'carousel': true,
 
     'utilities': true,
-    'responsive-utilities': true
+    'utilities-background': true,
+    'utilities-spacing': true,
+    'utilities-responsive': true
   }
 };

bootstrap-sass-scripts.loader.js → bootstrap-scripts.loader.js

@@ -1,19 +1,18 @@
 var scripts = [
-  'transition',
+  'util',
   'alert',
   'button',
   'carousel',
   'collapse',
   'dropdown',
   'modal',
-  'tooltip',
-  'popover',
   'scrollspy',
   'tab',
-  'affix'
+  'tooltip',
+  'popover'
 ];
 
-var bootstrapSassPath = require('./bootstrapSassPath');
+var bootstrapPath = require('./bootstrapPath');
 var path = require('path');
 
 module.exports = function() {
@@ -22,13 +21,13 @@ module.exports = function() {
 
 // Create a list of require('path/to/bootstrap.js');
 module.exports.pitch = function(configPath) {
-  var pathToBootstrapSass = bootstrapSassPath.getPath(this.context);
+  var pathToBootstrap = bootstrapPath.getPath(this.context);
   var config = require(configPath);
   this.cacheable(true);
   return scripts.filter(function(script) {
     return config.scripts[script];
   }).map(function(script) {
-    var pathToBootstrapJsFile = JSON.stringify(path.join(pathToBootstrapSass, 'javascripts',
+    var pathToBootstrapJsFile = JSON.stringify(path.join(pathToBootstrap, 'js/src',
         'bootstrap', script));
     return 'require(' + pathToBootstrapJsFile + ');';
   }).join('\n');

bootstrap-sass-styles.loader.js → bootstrap-styles.loader.js

@@ -3,48 +3,48 @@ var partials = [
 
   'normalize',
   'print',
-  'glyphicons',
 
-  'scaffolding',
+  'reboot',
   'type',
+  'images',
   'code',
   'grid',
   'tables',
   'forms',
   'buttons',
 
-  'component-animations',
-  'dropdowns',
-  'button-groups',
-  'input-groups',
-  'navs',
+  'animation',
+  'dropdown',
+  'button-group',
+  'input-group',
+  'custom-forms',
+  'nav',
   'navbar',
-  'breadcrumbs',
+  'card',
+  'breadcrumb',
   'pagination',
   'pager',
   'labels',
-  'badges',
   'jumbotron',
-  'thumbnails',
-  'alerts',
-  'progress-bars',
+  'alert',
+  'progress',
   'media',
   'list-group',
-  'panels',
-  'wells',
   'responsive-embed',
   'close',
 
-  'modals',
+  'modal',
   'tooltip',
-  'popovers',
+  'popover',
   'carousel',
 
   'utilities',
-  'responsive-utilities'
+  'utilities-background',
+  'utilities-spacing',
+  'utilities-responsive'
 ];
 var path = require('path');
-var bootstrapSassPath = require('./bootstrapSassPath');
+var bootstrapPath = require('./bootstrapPath');
 var logger = require('./logger');
 
 function addImportReturnDependency(loader, config, propertyName) {
@@ -62,22 +62,19 @@ function addImportReturnDependency(loader, config, propertyName) {
 module.exports = function(content) {
   var source;
   var config = this.exec(content, this.resourcePath);
-  var pathToBootstrapSass = bootstrapSassPath.getPath(this.context);
-  var relativePathToBootstrapSass = path.relative(this.context, pathToBootstrapSass);
+  var pathToBootstrap = bootstrapPath.getPath(this.context);
+  var relativePathToBootstrap = path.relative(this.context, pathToBootstrap);
   var start = '';
-  // This needs to be relative
-  var iconFontPath = '$icon-font-path: \'' + path.join(relativePathToBootstrapSass, 'fonts/bootstrap/') + '\';';
   this.cacheable(true);
-  logger.verbose(config, 'bootstrap-sass location: %s', relativePathToBootstrapSass);
-  logger.verbose(config, 'Setting: %s', iconFontPath);
+  logger.verbose(config, 'bootstrap location: %s', relativePathToBootstrap);
 
   if (config.preBootstrapCustomizations) {
     start += addImportReturnDependency(this, config, 'preBootstrapCustomizations');
   }
   start +=
     // Absolute paths as these are created at build time.
-    '@import \'' + path.join(relativePathToBootstrapSass,
-      'stylesheets/bootstrap/variables') + '\';\n' + iconFontPath + '\n';
+    '@import \'' + path.join(relativePathToBootstrap,
+      'scss/variables') + '\';\n';
 
   if (config.bootstrapCustomizations) {
     start += addImportReturnDependency(this, config, 'bootstrapCustomizations');
@@ -86,7 +83,7 @@ module.exports = function(content) {
   source = start + partials.filter(function(partial) {
       return config.styles[partial];
     }).map(function(partial) {
-      return '@import \'' + path.join(relativePathToBootstrapSass, 'stylesheets/bootstrap',
+      return '@import \'' + path.join(relativePathToBootstrap, 'scss',
           partial) + '\';';
     }).join('\n');
 

bootstrap-sass.config.js → bootstrap.config.js

@@ -31,63 +31,62 @@ module.exports = {
   // 'css-loader!sass?outputStyle=expanded'),
 
   scripts: {
-    'transition': true,
+    'util': true,
     'alert': true,
     'button': true,
     'carousel': true,
     'collapse': true,
     'dropdown': true,
     'modal': true,
-    'tooltip': true,
-    'popover': true,
     'scrollspy': true,
     'tab': true,
-    'affix': true
+    'tooltip': true,
+    'popover': true
   },
   styles: {
     'mixins': true,
 
     'normalize': true,
     'print': true,
-    'glyphicons': true,
 
-    'scaffolding': true,
+    'reboot': true,
     'type': true,
+    'images': true,
     'code': true,
     'grid': true,
     'tables': true,
     'forms': true,
     'buttons': true,
 
-    'component-animations': true,
-    'dropdowns': true,
-    'button-groups': true,
-    'input-groups': true,
-    'navs': true,
+    'animation': true,
+    'dropdown': true,
+    'button-group': true,
+    'input-group': true,
+    'custom-forms': true,
+    'nav': true,
     'navbar': true,
-    'breadcrumbs': true,
+    'card': true,
+    'breadcrumb': true,
     'pagination': true,
     'pager': true,
     'labels': true,
-    'badges': true,
     'jumbotron': true,
-    'thumbnails': true,
-    'alerts': true,
-    'progress-bars': true,
+    'alert': true,
+    'progress': true,
     'media': true,
     'list-group': true,
-    'panels': true,
-    'wells': true,
     'responsive-embed': true,
     'close': true,
 
-    'modals': true,
+    'modal': true,
     'tooltip': true,
-    'popovers': true,
+    'popover': true,
     'carousel': true,
 
     'utilities': true,
-    'responsive-utilities': true
+    'utilities-background': true,
+    'utilities-spacing': true,
+    'utilities-responsive': true
   }
 };
 

bootstrapSassPath.js → bootstrapPath.js

@@ -2,8 +2,8 @@ var fs = require('fs');
 var path = require('path');
 
 function bootstrapNotFound() {
-  var msg = 'Could not find path to bootstrap-sass. Check to see that it is in a parent ' +
-    'directory of config file containing node_modules/bootstrap-sass';
+  var msg = 'Could not find path to bootstrap. Check to see that it is in a parent ' +
+    'directory of config file containing node_modules/bootstrap';
   console.error('ERROR: ' + msg);
   throw new Error(msg);
 }
@@ -20,21 +20,21 @@ function createTestParentPath(configPath, nLevelsUp) {
     bootstrapNotFound();
   }
 
-  return path.resolve(path.join(levelsUp, 'node_modules', 'bootstrap-sass'));
+  return path.resolve(path.join(levelsUp, 'node_modules', 'bootstrap'));
 }
 
 module.exports = {
   getPath: function(configPath) {
-    var bootstrapSassParentPath;
+    var bootstrapParentPath;
     var i = 0;
     do {
-      bootstrapSassParentPath = createTestParentPath(configPath, i);
+      bootstrapParentPath = createTestParentPath(configPath, i);
       i += 1;
-    } while (!fs.existsSync(bootstrapSassParentPath) && i < 10);
+    } while (!fs.existsSync(bootstrapParentPath) && i < 10);
 
     if (i === 10) {
       bootstrapNotFound();
     }
-    return path.join(bootstrapSassParentPath, 'assets');
+    return bootstrapParentPath;
   }
 };

index.js

@@ -1 +1 @@
-require('./bootstrap-sass-no-customizations.config');
+require('./bootstrap-no-customizations.config');

index.loader.js

@@ -17,9 +17,9 @@ module.exports.pitch = function(remainingRequest) {
   this.cacheable(true);
 
   if (!configFilePath || configFilePath.trim() === '') {
-    msg = 'You specified the bootstrap-sass-loader with no configuration file. Please specify' +
-      ' the configuration file, like: \'bootstrap-sass!./bootstrap-sass.config.js\' or use' +
-      ' require(\'bootstrap-sass-loader\').';
+    msg = 'You specified the bootstrap-loader with no configuration file. Please specify' +
+      ' the configuration file, like: \'bootstrap!./bootstrap.config.js\' or use' +
+      ' require(\'bootstrap-loader\').';
     console.error('ERROR: ' + msg);
     throw new Error(msg);
   }
@@ -29,9 +29,9 @@ module.exports.pitch = function(remainingRequest) {
   logger.verbose(config, 'styleLoader: %s', styleLoader);
 
   styleLoaderCommand = 'require(' + JSON.stringify('-!' + styleLoader + '!' +
-      require.resolve('./bootstrap-sass-styles.loader.js') + '!' + configFilePath) + ');';
+      require.resolve('./bootstrap-styles.loader.js') + '!' + configFilePath) + ');';
   jsLoaderCommand = 'require(' + JSON.stringify('-!' +
-      require.resolve('./bootstrap-sass-scripts.loader.js') + '!' + configFilePath) + ');';
+      require.resolve('./bootstrap-scripts.loader.js') + '!' + configFilePath) + ');';
   result = [styleLoaderCommand, jsLoaderCommand].join('\n');
   return result;
 };