Vuepress: Vuepress does not work with versions of vue-cli and vuetify that use sass 8

[davydnorris]

• [x] I confirm that this is an issue rather than a question.

Bug report

The default options supplied for sass-loader break Sass 8, and cannot be overridden in config.js

Steps to reproduce

1. Create a vuepress project and add the latest Vuetify, which will trigger webpack to use Sass.
2. Execute npm run build
3. The process will fail with the error:

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

What is expected?

The site builds without error

What is actually happening?

The default options set for sass-loader are no longer valid for Sass 8. Instead of
{ indentedSyntax: true }
it is now
{ sassOptions: { indentedSyntax: true } }

No matter what you do in your config.js, the original property is set because the values in config.js are merged with the options object.

The problem is in @vuepress/core/lib/node/webpack/createBaseConfig.js, line 257:
createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign({ /* indentedSyntax: true*/ }, siteConfig.sass))
Commenting out the offending property in this line (as above), fixes the problem. My suggestion is that instead of merging the config, replace it completely. Then you can use the config.js file to adjust to different Sass versions.

Other relevant information

• Output of npx vuepress info in my VuePress project:

[pisandelli]

I had a similar issue (I posted a question in stackoverflow with more details)

I was just trying to use the .sass syntax instead of .scss. But always got a blank page.

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

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

Using lang="scss" everything goes fine.

But when I set lang=sass the browser console shows the same error pointed by @davydnorris.
I tried everything in my config.js but without success. The same with @davydnorris.

After searching a lot, just found a workaround. Downgrade sass-loader from 8.0.2 to version 7.3.1 check here

Now everything renders fine, by I think is not a good solution.

Output of npx vuepress info

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

Package.json

"devDependencies": {
    "node-sass": "^4.13.1",
    "pug": "^2.0.4",
    "pug-plain-loader": "^1.0.0",
    "sass-loader": "7.3.1",
    "vuepress": "^1.2.0"
  }

[davydnorris]

Thanks for the reply - I was able to get my vuepress working with Vuetify by doing the following:

• edit vuepress core/lib/node/webpack/createBaseConfig.js, line 257 as above
• I then got a version mismatch error, so i had to explicitly upgrade vue to 2.6.11
• I then added the following to my .vuepress/config.js

  sass: {
    sassOptions: {
      fiber: require('fibers'),
      indentedSyntax: true
    }
  }

• install fibers

After that everything worked perfectly.

[EqualMa]

Finally fix this by _overwriting_ loader options:

module.exports = {
  // ...
  chainWebpack(config, isServer) {
    for (const lang of ["sass", "scss"]) {
      for (const name of ["modules", "normal"]) {
        const rule = config.module.rule(lang).oneOf(name);
        rule.uses.delete("sass-loader");

        rule
          .use("sass-loader")
          .loader("sass-loader")
          .options({
            implementation: require("sass"),
            sassOptions: {
              fiber: require("fibers"),
              indentedSyntax: lang === "sass"
            }
          });
      }
    }
  }
  // ...
}

[Lionad-Morotar]

Finally fix this by _overwriting_ loader options:

module.exports = {
  // ...
  chainWebpack(config, isServer) {
    for (const lang of ["sass", "scss"]) {
      for (const name of ["modules", "normal"]) {
        const rule = config.module.rule(lang).oneOf(name);
        rule.uses.delete("sass-loader");

        rule
          .use("sass-loader")
          .loader("sass-loader")
          .options({
            implementation: require("sass"),
            sassOptions: {
              fiber: require("fibers"),
              indentedSyntax: lang === "sass"
            }
          });
      }
    }
  }
  // ...
}

Thanks, It works

[Johnsoct]

Still having this exact issue running:

Vuepress: 1.4.1
Node-sass: 4.13.1
Sass-loader: 8.0.2

[mesqueeb]

I still have this issue when trying to use sass out of the box.
Should we add the official workaround to the documentation? Because now no one can use sass out of the box.