Using .sass syntax with vuepress renders blank page

问题

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

First I added sass

yarn add sass-loader node-sass -D

Then:

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

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

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

回答1:

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

And I found a workaround here

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

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

来源：https://stackoverflow.com/questions/59957111/using-sass-syntax-with-vuepress-renders-blank-page

标签

Sass

VuePress