在vuepress中使用.sass语法会呈现空白页 [英] Using .sass syntax with vuepress renders blank page

问题描述

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

I'm trying to use .sass syntax within a vuepress page but nothing renders, no error in the console.

首先我添加了sass

yarn add sass-loader node-sass -D

然后:

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

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

没有任何显示，但是如果我更改为scss语法，一切都会很好.
我想念什么吗?

Nothing renders, but if I change to scss syntax, everything goes fine.
Am I missing something?

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

推荐答案

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

After a while, I just realised that my browser's console had this output

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.
因此，完成此操作后，现在一切正常.

So the point is to downgrade sass-loader to version 7.3.1.
So after doing this everything is working now.

我在Vuepress中发现了此问题，我正在等待更好的解决方案

I found this issue in Vuepress and I'm waiting for a better solution.

这篇关于在vuepress中使用.sass语法会呈现空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！