在 vuepress 中使用 .sass 语法呈现空白页面

Question

我正在尝试在 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

Answer 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? }

而且我找到了 解决方法

所以重点是降级sass-loader到版本7.3.1。
所以在这样做之后，现在一切正常。

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

在 vuepress 中使用 .sass 语法呈现空白页面

Using .sass syntax with vuepress renders blank page

sass

vuepress