Merge pull request #63 from weaverryan/allow-disable-resolve-url-loader

Allowing the resolve_url_loader to be disabled (for performance reasons)

Author: weaverryan

index.js

@@ -232,10 +232,20 @@ module.exports = {
     /**
      * Call this if you plan on loading SASS files.
      *
+     * Supported options:
+     *      * {bool} resolve_url_loader (default=true)
+     *              Whether or not to use the resolve-url-loader.
+     *              Setting to false can increase performance in some
+     *              cases, especially when using bootstrap_sass. But,
+     *              when disabled, all url()'s are resolved relative
+     *              to the original entry file... not whatever file
+     *              the url() appears in.
+     *
+     * @param {object} options
      * @return {exports}
      */
-    enableSassLoader() {
-        webpackConfig.enableSassLoader();
+    enableSassLoader(options = {}) {
+        webpackConfig.enableSassLoader(options);
 
         return this;
     },

lib/WebpackConfig.js

@@ -40,6 +40,9 @@ class WebpackConfig {
         this.useSourceMaps = false;
         this.usePostCssLoader = false;
         this.useSassLoader = false;
+        this.sassOptions = {
+            resolve_url_loader: true
+        };
         this.useLessLoader = false;
         this.cleanupOutput = false;
         this.sharedCommonsEntryName = null;
@@ -189,8 +192,16 @@ class WebpackConfig {
         this.usePostCssLoader = true;
     }
 
-    enableSassLoader() {
+    enableSassLoader(options = {}) {
         this.useSassLoader = true;
+
+        for (const optionKey of Object.keys(options)) {
+            if (!(optionKey in this.sassOptions)) {
+                throw new Error(`Invalid option "${optionKey}" passed to enableSassLoader(). Valid keys are ${Object.keys(this.sassOptions).join(', ')}`);
+            }
+
+            this.sassOptions[optionKey] = options[optionKey];
+        }
     }
 
     enableLessLoader() {

lib/config-generator.js

@@ -191,24 +191,29 @@ class ConfigGenerator {
         if (this.webpackConfig.useSassLoader) {
             loaderFeatures.ensureLoaderPackagesExist('sass');
 
+            const sassLoaders = [...cssLoaders];
+            if (true === this.webpackConfig.sassOptions.resolve_url_loader) {
+                // responsible for resolving SASS url() paths
+                // without this, all url() paths must be relative to the
+                // entry file, not the file that contains the url()
+                sassLoaders.push({
+                    loader: 'resolve-url-loader' + this.getSourceMapOption(),
+                });
+            }
+
+            sassLoaders.push({
+                loader: 'sass-loader',
+                options: {
+                    // needed by the resolve-url-loader
+                    sourceMap: (true === this.webpackConfig.sassOptions.resolve_url_loader) || this.webpackConfig.useSourceMaps
+                }
+            });
+
             rules.push({
                 test: /\.s[ac]ss$/,
                 use: ExtractTextPlugin.extract({
                     fallback: 'style-loader' + this.getSourceMapOption(),
-                    use: [
-                        ...cssLoaders,
-                        {
-                            // responsible for resolving SASS import paths
-                            loader: 'resolve-url-loader' + this.getSourceMapOption(),
-                        },
-                        {
-                            loader: 'sass-loader',
-                            options: {
-                                // always enabled, needed by resolve-url-loader
-                                sourceMap: true
-                            }
-                        },
-                    ]
+                    use: sassLoaders
                 })
             });
         }

package.json

@@ -59,7 +59,7 @@
     "less": "^2.7.2",
     "less-loader": "^4.0.2",
     "mocha": "^3.2.0",
-    "node-sass": "^4.5.0",
+    "node-sass": "^4.5.3",
     "nsp": "^2.6.3",
     "postcss-loader": "^1.3.3",
     "sass-loader": "^6.0.3",

test/WebpackConfig.js

@@ -251,4 +251,29 @@ describe('WebpackConfig object', () => {
             }).to.throw('configureBabel() cannot be called because your app has a .babelrc file');
         });
     });
+
+    describe('enableSassLoader', () => {
+        it('Call with no config', () => {
+            const config = createConfig();
+            config.enableSassLoader();
+
+            expect(config.useSassLoader).to.be.true;
+        });
+
+        it('Pass valid config', () => {
+            const config = createConfig();
+            config.enableSassLoader({ resolve_url_loader: false });
+
+            expect(config.useSassLoader).to.be.true;
+            expect(config.sassOptions.resolve_url_loader).to.be.false;
+        });
+
+        it('Pass invalid config', () => {
+            const config = createConfig();
+
+            expect(() => {
+                config.enableSassLoader({ fake_option: false });
+            }).to.throw('Invalid option "fake_option" passed to enableSassLoader()');
+        });
+    });
 });

test/config-generator.js

@@ -305,6 +305,22 @@ describe('The config-generator function', () => {
             const actualConfig = configGenerator(config);
 
             expect(JSON.stringify(actualConfig.module.rules)).to.contain('sass-loader');
+            expect(JSON.stringify(actualConfig.module.rules)).to.contain('resolve-url-loader');
+            // sourceMap option is needed for resolve-url-loader
+            expect(JSON.stringify(actualConfig.module.rules)).to.contain('"sourceMap":true');
+        });
+
+        it('enableSassLoader() without resolve_url_loader', () => {
+            const config = createConfig();
+            config.outputPath = '/tmp/output/public-path';
+            config.publicPath = '/public-path';
+            config.addEntry('main', './main');
+            config.enableSassLoader({ resolve_url_loader: false });
+
+            const actualConfig = configGenerator(config);
+
+            expect(JSON.stringify(actualConfig.module.rules)).to.not.contain('resolve-url-loader');
+            expect(JSON.stringify(actualConfig.module.rules)).to.contain('"sourceMap":false');
         });
     });