Edit components/Header.vue, replace the whole <style lang="stylus">...</style> with
<style lang="scss">
#header {
background: black
}
</style>
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
Bug report
Steps to reproduce
yarn install
vuepress-theme-blogsass-loader
as shown herecomponents/Header.vue
, replace the whole<style lang="stylus">...</style>
withyarn 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 consoleOther relevant information
npx vuepress info
in my VuePress project: