test: sass-loader (#831)

Author: evilebottnawi

package-lock.json

@@ -46,6 +46,8 @@
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.4.0",
     "prettier": "^1.15.2",
+    "sass": "^1.15.1",
+    "sass-loader": "^7.1.0",
     "standard-version": "^4.0.0",
     "strip-ansi": "^5.0.0",
     "webpack": "^4.26.1"

package.json

@@ -527,3 +527,32 @@ exports.push([module.id, \\":root {\\\\n  --fontSize: 1rem;\\\\n  --mainColor: r
 `;
 
 exports[`loader using together with "postcss-loader": warnings 1`] = `Array []`;
+
+exports[`loader using together with "sass-loader": errors 1`] = `Array []`;
+
+exports[`loader using together with "sass-loader": module (evaluated) 1`] = `
+Array [
+  Array [
+    1,
+    "body {
+  font: 100% Helvetica, sans-serif;
+  color: #333;
+}",
+    "",
+  ],
+]
+`;
+
+exports[`loader using together with "sass-loader": module 1`] = `
+"exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
+// imports
+
+
+// module
+exports.push([module.id, \\"body {\\\\n  font: 100% Helvetica, sans-serif;\\\\n  color: #333;\\\\n}\\", \\"\\"]);
+
+// exports
+"
+`;
+
+exports[`loader using together with "sass-loader": warnings 1`] = `Array []`;

test/__snapshots__/loader.test.js.snap

@@ -0,0 +1,7 @@
+$font-stack:    Helvetica, sans-serif;
+$primary-color: #333;
+
+body {
+  font: 100% $font-stack;
+  color: $primary-color;
+}

test/fixtures/scss/source.scss

@@ -114,6 +114,16 @@ const moduleConfig = (config) => {
                       },
                     ]
                   : []
+              )
+              .concat(
+                config.sassLoader
+                  ? [
+                      {
+                        loader: 'sass-loader',
+                        options: config.sassLoaderOptions || {},
+                      },
+                    ]
+                  : []
               ),
           },
           {

test/helpers.js

@@ -109,4 +109,26 @@ describe('loader', () => {
     expect(stats.compilation.warnings).toMatchSnapshot('warnings');
     expect(stats.compilation.errors).toMatchSnapshot('errors');
   });
+
+  it('using together with "sass-loader"', async () => {
+    const config = {
+      loader: { test: /\.s[ca]ss$/i },
+      sassLoader: true,
+      sassLoaderOptions: {
+        // eslint-disable-next-line global-require
+        implementation: require('sass'),
+      },
+    };
+    const testId = './scss/source.scss';
+    const stats = await webpack(testId, config);
+    const { modules } = stats.toJson();
+    const module = modules.find((m) => m.id === testId);
+
+    expect(module.source).toMatchSnapshot('module');
+    expect(evaluated(module.source, modules)).toMatchSnapshot(
+      'module (evaluated)'
+    );
+    expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    expect(stats.compilation.errors).toMatchSnapshot('errors');
+  });
 });