plugins.sass配置在H5环境无效

[Liaozzzzzz]

问题描述
配置plugins.sass引入全部sass变量, 在H5环境无效

复现步骤
[复现问题的步骤]

1. 在src/styles/themes.scss配置变量:

$test: 'red';

2. 配置plugins.sass如下:

const config = {
  ...
plugins: {
    sass: {
      resource: path.resolve(__dirname, '..', 'src/styles/themes.scss'),
      projectDirectory: path.resolve(__dirname, '..'),
      data: '$nav-height: 48px;',
    },
}
  ...
}

3. 在src/pages/index/index.scss内使用sass变量:

.index {
  flex-direction: column;
  width: 100%;
  color: $test;
}

4. 运行npm run build:h5 -- --watch, 编译报错。

期望行为
能正常运行, 并识别到sass变量

报错信息

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

• 操作系统: [Windows 10]
• Taro 版本 [v.1.3.13]
• Node.js 版本 [v10.15.3]
• 报错平台 [h5]

补充信息
h5环境编译的时候走的webpack-runner，编译sass文件时候会调用sass-loader， 阅读其源码发现可以在编译前将全局sass变量挂载到sassLoaderOption的data属性下， 即可解决。

const transformSassConfig = async (config = {}) => {
  const { sassLoaderOption = {}, plugins = {} } = config
  const { plugins: { sass = {} } } = plugins
  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 (let url of resource) {
          await getBundleContent(url)
        }
      }
    } catch (e) {
      console.log(e)
    }
  }
  if (sass.data) {
    bundledContent += sass.data
  }
  return {
    ...config,
    sassLoaderOption: {
      ...sassLoaderOption,
      data: sassLoaderOption.data ? `${sassLoaderOption.data}${bundledContent}` : bundledContent
    }
  };
};
exports.default = (appPath, config) => __awaiter(this, void 0, void 0, function* () {
// 新增的一行, 修改了传入的config中sassLoaderOption.data属性
  const newConfig = yield transformSassConfig(config);
  if (newConfig.isWatch) {
    try {
      yield buildDev(appPath, newConfig);
    }
    catch (e) {
      console.error(e);
    }
  }
  else {
    if ('enableDll' in newConfig) {
      warnConfigEnableDll();
    }
    try {
      yield buildProd(appPath, newConfig);
    }
    catch (e) {
      console.error(e);
      process.exit(1);
    }
  }
});

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[taro-bot]

CC @Littly