Installing sass-loader causes an error

[cezarmaftei]

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

Bug report

Steps to reproduce

1. Clone and yarn install vuepress-theme-blog
2. Install sass-loader as shown here
3. Edit components/Header.vue, replace the whole <style lang="stylus">...</style> with

<style lang="scss">
  #header {
    background: black
  }
</style>

4. Run yarn example:dev. While running, this warning shows in the console: warning > "sass-loader@13.0.2" has unmet peer dependency "webpack@^5.0.0".

When accessing http://localhost:8080/, the following error shows in console

Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (D:\vuepress\test\vuepress-theme-blog\node_modules\sass-loader\dist\index.js:27:24)
    at eval (webpack-internal:///./node_modules/@vuepress/core/node_modules/css-loader/dist/cjs.js?!./node_modules/@vuepress/core/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js!./node_modules/@vuepress/core/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vuepress/core/node_modules/vue-loader/lib/index.js?!./components/Header.vue?vue&type=style&index=0&lang=scss&:1:7)
    at ./node_modules/@vuepress/core/node_modules/css-loader/dist/cjs.js?!./node_modules/@vuepress/core/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js!./node_modules/@vuepress/core/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vuepress/core/node_modules/vue-loader/lib/index.js?!./components/Header.vue?vue&type=style&index=0&lang=scss& (http://localhost:8081/assets/js/app.js:2246:1)
    at __webpack_require__ (http://localhost:8081/assets/js/app.js:770:30)
    at fn (http://localhost:8081/assets/js/app.js:130:20)
    at eval (webpack-internal:///./node_modules/vue-style-loader/index.js!./node_modules/@vuepress/core/node_modules/css-loader/dist/cjs.js?!./node_modules/@vuepress/core/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js!./node_modules/@vuepress/core/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vuepress/core/node_modules/vue-loader/lib/index.js?!./components/Header.vue?vue&type=style&index=0&lang=scss&:4:15)
    at ./node_modules/vue-style-loader/index.js!./node_modules/@vuepress/core/node_modules/css-loader/dist/cjs.js?!./node_modules/@vuepress/core/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js!./node_modules/@vuepress/core/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vuepress/core/node_modules/vue-loader/lib/index.js?!./components/Header.vue?vue&type=style&index=0&lang=scss& (http://localhost:8081/assets/js/app.js:6452:1)
    at __webpack_require__ (http://localhost:8081/assets/js/app.js:770:30)
    at fn (http://localhost:8081/assets/js/app.js:130:20)
    at eval (webpack-internal:///./components/Header.vue?vue&type=style&index=0&lang=scss&:2:555)
    at ./components/Header.vue?vue&type=style&index=0&lang=scss& (http://localhost:8081/assets/js/app.js:1041:1)

Other relevant information

• Output of npx vuepress info in my VuePress project:

System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.2.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.19041.1266.0
  npmPackages:
    @vuepress/core: Not Found
    @vuepress/theme-default: Not Found
    vuepress: ^1.9.7 => 1.9.7
  npmGlobalPackages:
    vuepress: Not Found

[zjjjjjjjjjjd]

same problem

[zim32]

Same problem

[zim32]

Moreover it breaks the whole project event after removing sass-loader

[superredfish]

Same problem

1.0 stylus