使用 .sass 语法和 vuepress 呈现空白页面答案

【问题标题】：Using .sass syntax with vuepress renders blank page使用 .sass 语法和 vuepress 呈现空白页面
【发布时间】：2020-05-14 08:41:14
【问题描述】：

我正在尝试在 vuepress 页面中使用 .sass 语法，但没有呈现任何内容，控制台中也没有错误。

首先我添加了sass

yarn add sass-loader node-sass -D

然后：

<template lang="pug">
  h1 Hello World!
</template>

<style lang="sass">
h1
  color: red
</style>

没有渲染，但如果我更改为 scss 语法，一切都会正常。
我错过了什么吗？

Environment Info:

  System:
    OS: Linux 5.3 Ubuntu 19.10 (Eoan Ermine)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
  Binaries:
    Node: 13.7.0 - /usr/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 6.13.6 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 72.0.1
  npmPackages:
    @vuepress/core:  1.2.0 
    @vuepress/theme-default:  1.2.0 
    vuepress: ^1.2.0 => 1.2.0 
  npmGlobalPackages:
    vuepress: Not Found

【问题讨论】：

标签： sass vuepress

【解决方案1】：

过了一会儿，我才意识到我的浏览器的控制台有这个输出

ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
     - options has an unknown property 'indentedSyntax'. These properties are valid:
       object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

我找到了一个解决方法 here

所以重点是降级 sass-loader 到版本7.3.1。
因此，在完成此操作后，现在一切正常。

我在 Vuepress 中找到了this issue，我正在等待更好的解决方案。

【讨论】：