feat(compiler-sfc): add preprocessCustomRequire option

packages/compiler-sfc/src/compileStyle.ts

@@ -1,4 +1,3 @@
-// const postcss = require('postcss')
 import postcss, { ProcessOptions, LazyResult, Result, ResultMap } from 'postcss'
 import trimPlugin from './stylePluginTrim'
 import scopedPlugin from './stylePluginScoped'
@@ -19,6 +18,7 @@ export interface SFCStyleCompileOptions {
   trim?: boolean
   preprocessLang?: PreprocessLang
   preprocessOptions?: any
+  preprocessCustomRequire?: (id: string) => any
   postcssOptions?: any
   postcssPlugins?: any[]
 }
@@ -137,8 +137,13 @@ function preprocess(
   options: SFCStyleCompileOptions,
   preprocessor: StylePreprocessor
 ): StylePreprocessorResults {
-  return preprocessor.render(options.source, options.map, {
+  return preprocessor.render(
-    filename: options.filename,
+    options.source,
-    ...options.preprocessOptions
+    options.map,
-  })
+    {
+      filename: options.filename,
+      ...options.preprocessOptions
+    },
+    options.preprocessCustomRequire
+  )
 }

packages/compiler-sfc/src/stylePreprocessors.ts

@@ -1,7 +1,12 @@
 import merge from 'merge-source-map'
 
 export interface StylePreprocessor {
-  render(source: string, map?: object, options?: any): StylePreprocessorResults
+  render(
+    source: string,
+    map?: object,
+    options?: any,
+    customRequire?: (id: string) => any
+  ): StylePreprocessorResults
 }
 
 export interface StylePreprocessorResults {
@@ -12,8 +17,8 @@ export interface StylePreprocessorResults {
 
 // .scss/.sass processor
 const scss: StylePreprocessor = {
-  render(source, map, options) {
+  render(source, map, options, load = require) {
-    const nodeSass = require('sass')
+    const nodeSass = load('sass')
     const finalOptions = {
       ...options,
       data: source,
@@ -41,18 +46,23 @@ const scss: StylePreprocessor = {
 }
 
 const sass: StylePreprocessor = {
-  render(source, map, options) {
+  render(source, map, options, load) {
-    return scss.render(source, map, {
+    return scss.render(
-      ...options,
+      source,
-      indentedSyntax: true
+      map,
-    })
+      {
+        ...options,
+        indentedSyntax: true
+      },
+      load
+    )
   }
 }
 
 // .less
 const less: StylePreprocessor = {
-  render(source, map, options) {
+  render(source, map, options, load = require) {
-    const nodeLess = require('less')
+    const nodeLess = load('less')
 
     let result: any
     let error: Error | null = null
@@ -81,8 +91,8 @@ const less: StylePreprocessor = {
 
 // .styl
 const styl: StylePreprocessor = {
-  render(source, map, options) {
+  render(source, map, options, load = require) {
-    const nodeStylus = require('stylus')
+    const nodeStylus = load('stylus')
     try {
       const ref = nodeStylus(source)
       Object.keys(options).forEach(key => ref.set(key, options[key]))