Taro: 编译配置中的sass配置突然失效，无法正确注入全局样式文件及变量

Created on 15 Jun 2020 · 4Comments · Source: NervJS/taro

问题描述

项目 config/index.js 中的 scss 编译配置项失效，无法全局注入scss文件及变量，导致项目启动之后所有用到全局注入样式的文件全部报错。

复现步骤

克隆示例项目
[email protected]:cathe-zhang/taro-template.git
安装依赖
npm i
本地启动项目
yarn dev:h5 或 yarn dev:mp
编译失败，报错如下：

./src/pages/lab/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

  z-index: $modalZIndex;
          ^
      Undefined variable: "$modalZIndex".
      in /Users/cellerchan/code/git_repos/taro-template/src/pages/lab/index.scss (line 7, column 12)

以下是部分相关代码：

// config/index.js
const path = require('path')

const config = {
    // sass配置
    sass: {
        // 全局注入scss文件
        resource: [
            'src/styles/classes.scss',
            'src/styles/mixin.scss',
            'src/styles/theme.scss',
            'src/styles/var.scss',
        ],
        data: '$modalZIndex: 999;',
        projectDirectory: path.resolve(__dirname, '..'),
    }
}

module.exports = function (merge) {
    let exportConfig = {}
    if (process.env.NODE_ENV === 'pro') {
        exportConfig = merge({}, config, require('./pro'))
    } else if (process.env.NODE_ENV === 'sit') {
        exportConfig = merge({}, config, require('./sit'))
    } else if (process.env.NODE_ENV === 'uat') {
        exportConfig = merge({}, config, require('./uat'))
    } else {
        exportConfig = merge({}, config, require('./dev'))
    }
    return exportConfig
}

// src/pages/lab/index.scss
.sass-test {
  z-index: $modalZIndex;
}

期望行为

在项目src目录文件中能够正常使用全局注入的scss文件且编译成功。

报错信息

./src/pages/lab/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

  z-index: $modalZIndex;
          ^
      Undefined variable: "$modalZIndex".
      in /Users/cellerchan/code/git_repos/taro-template/src/pages/lab/index.scss (line 7, column 12)

系统信息

👽 Taro v2.2.7


  Taro CLI 2.2.7 environment info:
    System:
      OS: macOS 10.15.4
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.1.0 - /usr/local/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 2.2.7 => 2.2.7 
      @tarojs/components: 2.2.7 => 2.2.7 
      @tarojs/components-qa: 2.2.7 => 2.2.7 
      @tarojs/mini-runner: 2.2.7 => 2.2.7 
      @tarojs/mobx: 2.2.7 => 2.2.7 
      @tarojs/mobx-h5: 2.2.7 => 2.2.7 
      @tarojs/router: 2.2.7 => 2.2.7 
      @tarojs/taro: 2.2.7 => 2.2.7 
      @tarojs/taro-alipay: 2.2.7 => 2.2.7 
      @tarojs/taro-h5: 2.2.7 => 2.2.7 
      @tarojs/taro-qq: 2.2.7 => 2.2.7 
      @tarojs/taro-quickapp: 2.2.7 => 2.2.7 
      @tarojs/taro-swan: 2.2.7 => 2.2.7 
      @tarojs/taro-tt: 2.2.7 => 2.2.7 
      @tarojs/taro-weapp: 2.2.7 => 2.2.7 
      @tarojs/webpack-runner: 2.2.7 => 2.2.7 
      eslint-config-taro: 2.2.7 => 2.2.7 
      eslint-plugin-taro: 2.2.7 => 2.2.7 
      nerv-devtools: ^1.5.7 => 1.5.7 
      nervjs: ^1.5.7 => 1.5.7 
      stylelint-config-taro-rn: 2.2.7 => 2.2.7 
      stylelint-taro-rn: 2.2.7 => 2.2.7 
      taro-ui: ^2.3.1 => 2.3.4