fix(mini-runner): 修复 sass 变量失效的问题，close #4893

NervJS · Dec 16, 2019 · 878b65c · 878b65c
1 parent 6b5d3a8
commit 878b65c
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 31 deletions.
diff --git a/packages/taro-mini-runner/package.json b/packages/taro-mini-runner/package.json
@@ -63,6 +63,7 @@
     "request": "^2.88.0",
     "resolve": "^1.11.1",
     "sass-loader": "^7.1.0",
+    "scss-bundle": "^2.5.1",
     "stylus-loader": "^3.0.2",
     "uglifyjs-webpack-plugin": "^2.1.3",
     "url-loader": "^2.0.0",

diff --git a/packages/taro-mini-runner/src/index.ts b/packages/taro-mini-runner/src/index.ts
@@ -3,6 +3,7 @@ import * as webpack from 'webpack'
 import { IBuildConfig } from './utils/types'
 import { BUILD_TYPES } from './utils/constants'
 import { printBuildError, bindProdLogger, bindDevLogger } from './utils/logHelper'
+import Bundler from './utils/bundler'
 import buildConf from './webpack/build.conf'
 
 const customizeChain = (chain, customizeFunc: Function) => {
@@ -11,6 +12,64 @@ const customizeChain = (chain, customizeFunc: Function) => {
   }
 }
 
+const getSassLoaderOption = async ({ sass, sassLoaderOption }: IBuildConfig) => {
+  let bundledContent = ''
+  sassLoaderOption = sassLoaderOption || {}
+  if (!sass) {
+    return sassLoaderOption
+  }
+  if (sass.resource && !sass.projectDirectory) {
+    const { resource } = sass
+    try {
+      if (typeof resource === 'string') {
+        const res = await Bundler(resource)
+        bundledContent += res.bundledContent
+        if (Array.isArray(resource)) {
+          for (const url of resource) {
+            const res = await Bundler(url)
+            bundledContent += res.bundledContent
+          }
+        }
+      }
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  if (sass.resource && sass.projectDirectory) {
+    const { resource, projectDirectory } = sass
+    try {
+      if (typeof resource === 'string') {
+        const res = await Bundler(resource, projectDirectory)
+        bundledContent += res.bundledContent
+      }
+      if (Array.isArray(resource)) {
+        for (const url of resource) {
+          const res = await Bundler(url, projectDirectory)
+          bundledContent += res.bundledContent
+        }
+      }
+    } catch (e) {
+      console.log(e)
+    }
+  }
+  if (sass.data) {
+    bundledContent += sass.data
+  }
+  return {
+    ...sassLoaderOption,
+    data: sassLoaderOption.data ? `${sassLoaderOption.data}${bundledContent}` : bundledContent
+  }
+}
+
+const makeConfig = async (buildConfig: IBuildConfig) => {
+  const sassLoaderOption = await getSassLoaderOption(buildConfig)
+  return {
+    ...buildConfig,
+    sassLoaderOption
+  }
+}
+
 export default function build (appPath: string, config: IBuildConfig, mainBuilder) {
   const mode = config.isWatch ? 'development' : 'production'
   return new Promise((resolve, reject) => {
@@ -19,35 +78,38 @@ export default function build (appPath: string, config: IBuildConfig, mainBuilde
       config.buildAdapter = BUILD_TYPES.WEAPP
       config.isBuildPlugin = true
     }
-    const webpackChain = buildConf(appPath, mode, config)
-
-    customizeChain(webpackChain, config.webpackChain)
-    const webpackConfig = webpackChain.toConfig()
-
-    const compiler = webpack(webpackConfig)
-    if (config.isWatch) {
-      bindDevLogger(compiler, config.buildAdapter)
-      compiler.watch({
-        aggregateTimeout: 300,
-        poll: true
-      }, (err, stats) => {
-        if (err) {
-          printBuildError(err)
-          return reject(err)
-        }
-        mainBuilder.hooks.afterBuild.call(stats)
-        resolve()
-      })
-    } else {
-      bindProdLogger(compiler, config.buildAdapter)
-      compiler.run((err, stats) => {
-        if (err) {
-          printBuildError(err)
-          return reject(err)
+    makeConfig(config)
+      .then(config => {
+        const webpackChain = buildConf(appPath, mode, config)
+
+        customizeChain(webpackChain, config.webpackChain)
+        const webpackConfig = webpackChain.toConfig()
+
+        const compiler = webpack(webpackConfig)
+        if (config.isWatch) {
+          bindDevLogger(compiler, config.buildAdapter)
+          compiler.watch({
+            aggregateTimeout: 300,
+            poll: true
+          }, (err, stats) => {
+            if (err) {
+              printBuildError(err)
+              return reject(err)
+            }
+            mainBuilder.hooks.afterBuild.call(stats)
+            resolve()
+          })
+        } else {
+          bindProdLogger(compiler, config.buildAdapter)
+          compiler.run((err, stats) => {
+            if (err) {
+              printBuildError(err)
+              return reject(err)
+            }
+            mainBuilder.hooks.afterBuild.call(stats)
+            resolve()
+          })
         }
-        mainBuilder.hooks.afterBuild.call(stats)
-        resolve()
       })
-    }
   })
 }
diff --git a/packages/taro-mini-runner/src/utils/bundler.ts b/packages/taro-mini-runner/src/utils/bundler.ts
@@ -0,0 +1,24 @@
+import { Bundler } from 'scss-bundle'
+
+/**
+ * Return bundled sass content.
+ *
+ * @param {string} url Absolute file path.
+ * @param {(string | undefined)} projectDirectory Absolute project location, where node_modules are located. Used for resolving tilde imports.
+ * @returns Bundle result.
+ */
+async function getBundleContent(url, projectDirectory?) {
+  let bundler: any
+  if (projectDirectory) {
+    bundler = new Bundler(undefined, projectDirectory)
+  } else {
+    bundler = new Bundler()
+  }
+  if (!bundler) {
+    throw new ReferenceError(`'bundler' is not defined.`)
+  }
+  const res = await bundler.Bundle(url)
+  return res
+}
+
+export default getBundleContent
diff --git a/packages/taro-mini-runner/src/utils/helper.ts b/packages/taro-mini-runner/src/utils/helper.ts
@@ -1,13 +1,13 @@
 import * as path from 'path'
 import * as _ from 'lodash'
 
-import { getInstalledNpmPkgPath, promoteRelativePath, removeHeadSlash } from '.'
-import { taroJsQuickAppComponents, REG_STYLE, REG_SCRIPT } from './constants'
+import { getInstalledNpmPkgPath, promoteRelativePath, removeHeadSlash, printLog } from '.'
+import { taroJsQuickAppComponents, REG_STYLE, REG_SCRIPT, processTypeEnum } from './constants'
 
 export function getTaroJsQuickAppComponentsPath (nodeModulesPath: string): string {
   const taroJsQuickAppComponentsPkg = getInstalledNpmPkgPath(taroJsQuickAppComponents, nodeModulesPath)
   if (!taroJsQuickAppComponentsPkg) {
-    // printLog(processTypeEnum.ERROR, '包安装', `缺少包 ${taroJsQuickAppComponents}，请安装！`)
+    printLog(processTypeEnum.ERROR, '包安装', `缺少包 ${taroJsQuickAppComponents}，请安装！`)
     process.exit(0)
   }
   return path.join(path.dirname(taroJsQuickAppComponentsPkg as string), 'src/components')