feat: you can also customize rendering settings

Author: shadowtime2000

plugins/sass.ts

@@ -1,6 +1,6 @@
-import { renderSync } from 'https://esm.sh/[email protected]'
+import { Options, renderSync } from 'https://esm.sh/[email protected]'
 
-export default {
+const defaultOptions = {
     name: 'sass-loader',
     test: /.(sass|scss)$/,
     acceptHMR: true,
@@ -31,3 +31,41 @@ export default {
         }
     }
 }
+
+let plugin: any = (opts: Options) => ({
+    name: 'sass-loader',
+    test: /.(sass|scss)$/,
+    acceptHMR: true,
+    transform(content: Uint8Array, path: string) {
+        if (path.endsWith('.sass')) {
+            const ret = renderSync({
+                ...opts,
+                file: path,
+                data: (new TextDecoder).decode(content),
+                sourceMap: true,
+                indentedSyntax: true
+            })
+            return {
+                code: (new TextDecoder).decode(ret.css),
+                map: ret.map ? (new TextDecoder).decode(ret.map) : undefined,
+                loader: 'css'
+            }
+        } else {
+            const ret = renderSync({
+                ...opts,
+                file: path,
+                data: (new TextDecoder).decode(content),
+                sourceMap: true
+            })
+            return {
+                code: (new TextDecoder).decode(ret.css),
+                map: ret.map ? (new TextDecoder).decode(ret.map) : undefined,
+                loader: 'css'
+            }
+        }
+    }
+})
+
+plugin = { ...plugin, ...defaultOptions }
+
+export default plugin;