Taro sass

2021-09-23 21:05 更新

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 文件的绝对路径。

  1. module.exports = {
  2. // ...
  3. sass: {
  4. resource: path.resolve(__dirname, '..', 'src/styles/variable.scss')
  5. }
  6. }

多文件路径形式

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

  1. module.exports = {
  2. // ...
  3. sass: {
  4. resource: [
  5. path.resolve(__dirname, '..', 'src/styles/variable.scss'),
  6. path.resolve(__dirname, '..', 'src/styles/mixins.scss')
  7. ]
  8. }
  9. }

指定项目根目录路径形式

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

  1. module.exports = {
  2. // ...
  3. sass: {
  4. resource: [
  5. 'src/styles/variable.scss',
  6. 'src/styles/mixins.scss'
  7. ],
  8. projectDirectory: path.resolve(__dirname, '..')
  9. }
  10. }

传入 scss 变量字符串

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

  1. module.exports = {
  2. // ...
  3. sass: {
  4. resource: [
  5. 'src/styles/variable.scss',
  6. 'src/styles/mixins.scss'
  7. ],
  8. projectDirectory: path.resolve(__dirname, '..'),
  9. data: '$nav-height: 48px;'
  10. }
  11. }


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号