fix(cli): 修复h5环境下plugins-sass配置不生效的问题 (#4474)

* fix: 修复h5环境下plugins-sass配置不生效的问题

* fix: 修复未赋初始值报错的问题

packages/taro-webpack-runner/package.json

@@ -69,7 +69,8 @@
     "webpack": "4.28.4",
     "webpack-chain": "4.9.0",
     "webpack-dev-server": "3.1.14",
-    "webpack-format-messages": "2.0.3"
+    "webpack-format-messages": "2.0.3",
+    "scss-bundle": "^2.5.1"
   },
   "devDependencies": {
     "@types/autoprefixer": "6.7.3",

packages/taro-webpack-runner/src/index.ts

@@ -4,14 +4,14 @@ import * as path from 'path'
 import { format as formatUrl } from 'url'
 import * as webpack from 'webpack'
 import * as WebpackDevServer from 'webpack-dev-server'
-
 import buildConf from './config/build.conf'
 import devConf from './config/dev.conf'
 import baseDevServerOption from './config/devServer.conf'
 import prodConf from './config/prod.conf'
 import { addLeadingSlash, addTrailingSlash, recursiveMerge } from './util'
 import { bindDevLogger, bindProdLogger, printBuildError } from './util/logHelper'
 import { BuildConfig } from './util/types'
+import { makeConfig } from './util/chain';
 
 const stripTrailingSlash = (path: string): string =>
   path.charAt(path.length - 1) === '/' ? path.slice(0, -1) : path
@@ -128,15 +128,16 @@ const buildDev = async (appPath: string, config: BuildConfig): Promise<any> => {
 }
 
 export default async (appPath: string, config: BuildConfig): Promise<void> => {
-  if (config.isWatch) {
+  const newConfig: BuildConfig = await makeConfig(config);
+  if (newConfig.isWatch) {
     try {
-      await buildDev(appPath, config)
+      await buildDev(appPath, newConfig)
     } catch (e) {
       console.error(e)
     }
   } else {
     try {
-      await buildProd(appPath, config)
+      await buildProd(appPath, newConfig)
     } catch (e) {
       console.error(e)
       process.exit(1);

packages/taro-webpack-runner/src/util/chain.ts

@@ -7,12 +7,52 @@ import { partial } from 'lodash'
 import { mapKeys, pipe } from 'lodash/fp'
 import * as MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import { join, resolve } from 'path'
+import { Bundler } from 'scss-bundle'
 import * as UglifyJsPlugin from 'uglifyjs-webpack-plugin'
 import * as webpack from 'webpack'
 
 import { recursiveMerge } from '.'
 import { getPostcssPlugins } from '../config/postcss.conf'
-import { CopyOptions, Option, PostcssOption } from './types'
+import {BuildConfig, CopyOptions, Option, PostcssOption} from './types'
+
+const makeConfig = async (config: BuildConfig) => {
+  const plugins = config.plugins || {}
+  const sassLoaderOption = config.sassLoaderOption || {}
+  const sass= plugins.sass || {}
+
+  let bundledContent = ''
+  if (sass.resource && sass.projectDirectory) {
+    const { resource, projectDirectory } = sass
+    const getBundleContent = async (url) => {
+      const bundler = new Bundler(undefined, projectDirectory)
+      const res = await bundler.Bundle(url)
+      bundledContent += res.bundledContent
+    }
+
+    try {
+      if (typeof resource === 'string') {
+        await getBundleContent(resource)
+      } else if (Array.isArray(resource)) {
+        for (const url of resource) {
+          await getBundleContent(url)
+        }
+      }
+    } catch (e) {
+      console.log(e)
+    }
+  }
+  if (sass.data) {
+    bundledContent += sass.data
+  }
+  return {
+    ...config,
+    plugins,
+    sassLoaderOption: {
+      ...sassLoaderOption,
+      data: sassLoaderOption.data ? `${sassLoaderOption.data}${bundledContent}` : bundledContent
+    }
+  }
+}
 
 const defaultUglifyJsOption = {
   keep_fnames: true,
@@ -261,7 +301,7 @@ const getModule = (appPath: string, {
   const extractCssLoader = getExtractCssLoader()
 
   const lastStyleLoader = enableExtract ? extractCssLoader : styleLoader
-  
+
   /**
    * css-loader 1.0.0版本移除了minimize选项...升级需谨慎
    *
@@ -421,7 +461,8 @@ const getDevtool = enableSourceMap => {
 export {
   isNodeModule,
   isTaroModule,
-  getEsnextModuleRules
+  getEsnextModuleRules,
+  makeConfig
 }
 
 export { getOutput, getMiniCssExtractPlugin, getHtmlWebpackPlugin, getDefinePlugin, processEnvOption, getHotModuleReplacementPlugin, getModule, getUglifyPlugin, getDevtool, getCssoWebpackPlugin, getCopyWebpackPlugin }

packages/taro-webpack-runner/src/util/types.ts

@@ -76,6 +76,7 @@ export interface TaroPlugins {
   babel: Option;
   csso?: TogglableOptions;
   uglify?: TogglableOptions;
+  sass?: Option;
 }
 
 export interface CopyOptions {