Taro sass

sass

object

用于控制对 scss 代码的编译行为，具体配置可以参考 node-sass。

当需要往所有 scss 文件头部插入 scss 代码时，可以通过以下三个额外参数设置：

sass.resource

string | array

需要全局注入的 scss 文件的绝对路径。如果要引入多个文件，支持以数组形式传入。

当存在 projectDirectory 配置时，才支持传入相对路径。

sass.projectDirectory

string

项目根目录的绝对地址(若为小程序云开发模板，则应该是client目录)。

sass.data

string

全局 scss 变量，若 data 与 resource 中设置了同样的变量，则 data 的优先级高于 resource。

全局注入 scss 的例子

单文件路径形式

当只有 resource 字段时，可以传入 scss 文件的绝对路径。

module.exports = {
  // ...
  sass: {
    resource: path.resolve(__dirname, '..', 'src/styles/variable.scss')
  }
}

多文件路径形式

此外，当只有 resource 字段时，也可以传入一个路径数组。

module.exports = {
  // ...
  sass: {
    resource: [
      path.resolve(__dirname, '..', 'src/styles/variable.scss'),
      path.resolve(__dirname, '..', 'src/styles/mixins.scss')
    ]
  }
}

指定项目根目录路径形式

你可以额外配置 projectDirectory 字段，这样你就可以在 resource 里写相对路径了。

module.exports = {
  // ...
  sass: {
    resource: [
      'src/styles/variable.scss',
      'src/styles/mixins.scss'
    ],
    projectDirectory: path.resolve(__dirname, '..')
  }
}

传入 scss 变量字符串

data 中声明的 $nav-height 变量优先级最高。

module.exports = {
  // ...
  sass: {
    resource: [
      'src/styles/variable.scss',
      'src/styles/mixins.scss'
    ],
    projectDirectory: path.resolve(__dirname, '..'),
    data: '$nav-height: 48px;'
  }
}