refactor(compiler-sfc): support sass modern api

packages/compiler-sfc/src/style/preprocessors.ts

@@ -23,28 +23,28 @@ export interface StylePreprocessorResults {
 
 // .scss/.sass processor
 const scss: StylePreprocessor = (source, map, options, load = require) => {
-  const nodeSass = load('sass')
-  const finalOptions = {
+  const { pathToFileURL, fileURLToPath }: typeof import('url') = load('url')
+  const nodeSass: typeof import('sass') = load('sass')
+  const data = getSource(source, options.filename, options.additionalData)
+  const finalOptions: import('sass').StringOptions<'sync'> = {
     ...options,
-    data: getSource(source, options.filename, options.additionalData),
-    file: options.filename,
-    outFile: options.filename,
+    url: pathToFileURL(options.filename),
     sourceMap: !!map,
   }
 
   try {
-    const result = nodeSass.renderSync(finalOptions)
-    const dependencies = result.stats.includedFiles
+    const result = nodeSass.compileString(data, finalOptions)
+    const dependencies = result.loadedUrls.map(url => fileURLToPath(url))
     if (map) {
       return {
-        code: result.css.toString(),
-        map: merge(map, JSON.parse(result.map.toString())),
+        code: result.css,
+        map: merge(map, result.sourceMap!),
         errors: [],
         dependencies,
       }
     }
 
-    return { code: result.css.toString(), errors: [], dependencies }
+    return { code: result.css, errors: [], dependencies }
   } catch (e: any) {
     return { code: '', errors: [e], dependencies: [] }
   }