Add default loaders for SASS

Author: lnhrdt

README.md

@@ -26,7 +26,11 @@ Use the following file extensions for any CSS Modules styles:
 - `*.module.sass`
 - `*.module.scss`
 
-Files with just a `*.css` file extension will load normally, without the CSS Modules loader.
+Files with the following file extensions will load normally, without the CSS Modules loader:
+
+- `*.css`
+- `*.sass`
+- `*.scss`
 
 ### Example
 

index.js

@@ -33,17 +33,23 @@ const addBeforeRule = (rulesSource, ruleMatcher, value) => {
 
 module.exports = function (config, env) {
     const cssRule = findRule(config.module.rules, cssRuleMatcher)
+    const sassRule = cloneDeep(cssRule)
     const cssModulesRule = cloneDeep(cssRule)
+
     cssRule.exclude = /\.module\.css$/
-    const cssModulesRuleCssLoader = findRule(cssModulesRule, cssLoaderMatcher)
 
+    const cssModulesRuleCssLoader = findRule(cssModulesRule, cssLoaderMatcher)
     cssModulesRuleCssLoader.options = Object.assign({modules: true, localIdentName: '[local]___[hash:base64:5]'}, cssModulesRuleCssLoader.options)
+    addBeforeRule(config.module.rules, fileLoaderMatcher, cssModulesRule)
+
+    sassRule.test = /\.s[ac]ss$/
+    sassRule.exclude = /\.module\.s[ac]ss$/
+    addAfterRule(sassRule, postcssLoaderMatcher, require.resolve('sass-loader'))
+    addBeforeRule(config.module.rules, fileLoaderMatcher, sassRule)
 
     const sassModulesRule = cloneDeep(cssModulesRule)
     sassModulesRule.test = /\.module\.s[ac]ss$/
     addAfterRule(sassModulesRule, postcssLoaderMatcher, require.resolve('sass-loader'))
-
-    addBeforeRule(config.module.rules, fileLoaderMatcher, cssModulesRule)
     addBeforeRule(config.module.rules, fileLoaderMatcher, sassModulesRule)
 
     return config

index.test.js

@@ -171,37 +171,69 @@ describe('CSS Modules rewire', () => {
         describe('development', () => {
 
             const result = subject(mockDevelopmentConfig)
+            const cssLoader = result.module.rules[1].oneOf[2]
             const cssModulesLoader = result.module.rules[1].oneOf[3]
-            const sassModulesLoader = result.module.rules[1].oneOf[4]
-
-            it('should configure the test regex', () => {
-                expect(sassModulesLoader.test).toEqual(/\.module\.s[ac]ss$/)
-            })
+            const sassLoader = result.module.rules[1].oneOf[4]
+            const sassModulesLoader = result.module.rules[1].oneOf[5]
 
-            it('should build upon the CSS loader', () => {
-                expect(sassModulesLoader.use.slice(0, 3)).toEqual(cssModulesLoader.use)
+            describe('regular loader', () => {
+                it('should configure a regular loader', () => {
+                    expect(sassLoader.test).toEqual(/\.s[ac]ss$/)
+                    expect(sassLoader.exclude).toEqual(/\.module\.s[ac]ss$/)
+                })
+                it('should build upon the CSS loader', () => {
+                    expect(sassLoader.use.slice(0, 3)).toEqual(cssLoader.use)
+                })
+                it('should append the sass-loader', () => {
+                    expect(sassLoader.use[3]).toContain('/sass-loader/')
+                })
             })
 
-            it('should append the sass-loader', () => {
-                expect(sassModulesLoader.use[3]).toContain('/sass-loader/')
+            describe('modules loader', () => {
+                it('should configure a modules loader', () => {
+                    expect(sassModulesLoader.test).toEqual(/\.module\.s[ac]ss$/)
+                })
+                it('should build upon the CSS loader', () => {
+                    expect(sassModulesLoader.use.slice(0, 3)).toEqual(cssModulesLoader.use)
+                })
+                it('should append the sass-loader', () => {
+                    expect(sassModulesLoader.use[3]).toContain('/sass-loader/')
+                })
             })
         })
 
         describe('production', () => {
             const result = subject(mockProductionConfig)
+            const cssLoader = result.module.rules[1].oneOf[2]
             const cssModulesLoader = result.module.rules[1].oneOf[3]
-            const sassModulesLoader = result.module.rules[1].oneOf[4]
+            const sassLoader = result.module.rules[1].oneOf[4]
+            const sassModulesLoader = result.module.rules[1].oneOf[5]
 
-            it('should configure the test regex', () => {
-                expect(sassModulesLoader.test).toEqual(/\.module\.s[ac]ss$/)
+            describe('regular loader', () => {
+                it('should configure a regular loader', () => {
+                    expect(sassLoader.test).toEqual(/\.s[ac]ss$/)
+                    expect(sassLoader.exclude).toEqual(/\.module\.s[ac]ss$/)
+                })
+                it('should build upon the CSS loader', () => {
+                    expect(sassLoader.loader.slice(0, 4)).toEqual(cssLoader.loader)
+                })
+                it('should append the sass-loader', () => {
+                    expect(sassLoader.loader[4]).toContain('/sass-loader/')
+                })
             })
 
-            it('should build upon the CSS loader', () => {
-                expect(sassModulesLoader.loader.slice(0, 4)).toEqual(cssModulesLoader.loader)
-            })
+            describe('modules loader', () => {
+                it('should configure the test regex', () => {
+                    expect(sassModulesLoader.test).toEqual(/\.module\.s[ac]ss$/)
+                })
+
+                it('should build upon the CSS loader', () => {
+                    expect(sassModulesLoader.loader.slice(0, 4)).toEqual(cssModulesLoader.loader)
+                })
 
-            it('should append the sass-loader', () => {
-                expect(sassModulesLoader.loader[4]).toContain('/sass-loader/')
+                it('should append the sass-loader', () => {
+                    expect(sassModulesLoader.loader[4]).toContain('/sass-loader/')
+                })
             })
         })
     })