refine scss errors with SASS loader option

Author: weilinzung

package.json

@@ -46,6 +46,7 @@
     "memory-fs": "^0.4.1",
     "mini-css-extract-plugin": "^0.6.0",
     "node-sass": "^4.12.0",
+    "sass": "^1.20.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.31.0"

test/fixtures/mini-css-extract-babel-syntax/index.scss

@@ -2,7 +2,7 @@ body {
 	color: red;
 
 	.container {
-		margin-op: 100px;
+		margin-top: 100px
 
 		.test {
 			vertical-align: middle;

test/fixtures/mini-css-extract-babel-syntax/webpack.config.js

@@ -23,7 +23,12 @@ module.exports = {
            MiniCssExtractPlugin.loader,
           'style-loader',
           'css-loader',
-          'sass-loader'
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('sass'),
+            }
+          },
         ],
       }
     ]

test/integration.spec.js

@@ -119,7 +119,15 @@ it('integration : mini CSS extract plugin babel error', async() => {
   const logs = await executeAndGetLogs('./fixtures/mini-css-extract-babel-syntax/webpack.config');
   const clean_logs = logs.toString().replace(/\"/g, ""); //<- double quotes issue with slash
   expect(clean_logs).toEqual(
-    `ERROR  Failed to compile with 1 errors,,error  in ./test/fixtures/mini-css-extract-babel-syntax/index.scss,,Syntax Error: NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: window is not defined,`
+    `ERROR  Failed to compile with 1 errors,,error  in ./test/fixtures/mini-css-extract-babel-syntax/index.scss,,.test {
+  ^
+      Expected digit.
+  ╷
+7 │         .test {
+  │          ^
+  ╵
+  stdin 7:4  root stylesheet
+      in ${filename('fixtures/mini-css-extract-babel-syntax/index.scss')} (line 7, column 4),`
   );
 });