feat(cli): 支持编译样式文件中 import 的样式文件，closes #746，closes #758

NervJS · Oct 2, 2018 · 86cc770 · 86cc770
1 parent b065c9a
commit 86cc770
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/taro-cli/src/util/index.js b/packages/taro-cli/src/util/index.js
@@ -397,16 +397,20 @@ exports.cssImports = function (content) {
 
 exports.processStyleImports = function (content, adapter) {
   const style = []
+  const imports = []
+  const styleReg = new RegExp(`\.${exports.MINI_APP_FILES[adapter].STYLE}`)
   content = content.replace(exports.CSS_IMPORT_REG, (m, $1, $2) => {
-    if (new RegExp(`\.${adapter}`).test($2)) {
+    if (styleReg.test($2)) {
       style.push(m)
+      imports.push($2)
       return ''
     }
     return m
   })
   return {
     content,
-    style
+    style,
+    imports
   }
 }
 

diff --git a/packages/taro-cli/src/weapp.js b/packages/taro-cli/src/weapp.js
@@ -1258,6 +1258,17 @@ async function processStyleWithPostCSS (styleObj) {
   return postcssResult.css
 }
 
+function compileImportStyles (filePath, importStyles) {
+  if (importStyles.length) {
+    importStyles.forEach(async importItem => {
+      const importFilePath = path.resolve(filePath, '..', importItem)
+      if (fs.existsSync(importFilePath)) {
+        await compileDepStyles(importFilePath.replace(sourceDir, outputDir), [importFilePath])
+      }
+    })
+  }
+}
+
 function compileDepStyles (outputFilePath, styleFiles, isComponent) {
   if (isBuildingStyles[outputFilePath]) {
     return Promise.resolve({})
@@ -1269,6 +1280,7 @@ function compileDepStyles (outputFilePath, styleFiles, isComponent) {
     const pluginName = Util.FILE_PROCESSOR_MAP[fileExt]
     const fileContent = fs.readFileSync(filePath).toString()
     const cssImportsRes = Util.processStyleImports(fileContent, buildAdapter)
+    compileImportStyles(filePath, cssImportsRes.imports)
     if (pluginName) {
       return npmProcess.callPlugin(pluginName, cssImportsRes.content, filePath, pluginsConfig[pluginName] || {})
         .then(res => ({