sass

object

用于控制對 scss 代碼的編譯行為，具體配置可以參考 node-sass。

當(dāng)需要往所有 scss 文件頭部插入 scss 代碼時，可以通過以下三個額外參數(shù)設(shè)置：

sass.resource

string | array

需要全局注入的 scss 文件的絕對路徑。如果要引入多個文件，支持以數(shù)組形式傳入。

當(dāng)存在 projectDirectory 配置時，才支持傳入相對路徑。

sass.projectDirectory

string

項目根目錄的絕對地址(若為小程序云開發(fā)模板，則應(yīng)該是client目錄)。

sass.data

string

全局 scss 變量，若 data 與 resource 中設(shè)置了同樣的變量，則 data 的優(yōu)先級高于 resource。

全局注入 scss 的例子

單文件路徑形式

當(dāng)只有 resource 字段時，可以傳入 scss 文件的絕對路徑。

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

多文件路徑形式

此外，當(dāng)只有 resource 字段時，也可以傳入一個路徑數(shù)組。

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 變量優(yōu)先級最高。

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