stevgouws
commented
5 years ago I'm having the same issue using Gitlab Pages. I managed to get around it by creating a Layout.vue indocs/.vuepress/theme, renaming docs/.vuepress/theme/layouts/Layout.vue to BaseLayout.vue and then just wrapping it with Layout.vue.
<template>
<div class="theme-container">
<BaseLayout/>
</div>
</template>
<script>
import BaseLayout from "./layouts/BaseLayout"
export default {
components: {
BaseLayout
}
}
</script>However I keep getting other errors compiling further on.
First it had an issue with using the lighten function from stylus
Error: /builds/stevgouws/stevengouws.com---vuepress/node_modules/stylus/lib/functions/index.styl:133:36
129|
130| // lighten by the given amount
131|
132| lighten(color, amount)
133| adjust(color, 'lightness', amount)
-------------------------------------------^
134|
135| // decrease opacity by amount
136|
TypeError: expected rgba or hsla, but got ident:$accentColorThen when I removed my use of lighten just to test it can't find the config with @require './config' in arrow.styl of the ejected theme.
(undefined) ./docs/.vuepress/theme/styles/theme.styl?vue&type=style&index=1&lang=stylus& (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--13-oneOf-1-2!./node_modules/stylus-loader??ref--13-oneOf-1-3!./docs/.vuepress/theme/styles/theme.styl?vue&type=style&index=1&lang=stylus&)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/stylus-loader/index.js):
Error: /builds/stevgouws/stevengouws.com---vuepress/docs/.vuepress/theme/styles/arrow.styl:1:10
1| @require './config'
---------------^
2|
3| .arrow
4| display inline-block
failed to locate @require file ./config.stylSo either I'm doing something very wrong or it seems that there is somekind of webpack config that I'm missing somewhere or something?
Any help pointing in the right direction would be appreciated.
Also, with vuepress dev and vuepress build locally it works fine which is what I really don't understand.
Correction: Sorry it does give the same errors when I build locally too. (I must have tested that before I detached the theme). At least that makes more sense.
meteorlxy
LouisaNikita
The theme documentation appears to be a little out of sync with the behaviour.
According to the documentation at https://vuepress.vuejs.org/theme VuePress appears to be able to either take a (NPM module theme vuepress-theme-XXX)[https://vuepress.vuejs.org/theme/using-a-theme.html#using-a-theme-from-a-dependency] OR a (custom local theme)[https://vuepress.vuejs.org/theme/writing-a-theme.html]
If I try my own theme (which works with a local build with vuepress dev and creates the local file visually correctly) within a Netlify build vuepress build I get an error complaining it cannot resolve Layout.vue as shown below:...
4:58:05 PM: Error: [vuepress] Cannot resolve Layout.vue file in .vuepress/theme.4:58:05 PM: at resolveOptions (/opt/build/repo/node_modules/vuepress/lib/prepare/resolveOptions.js:78:15)4:58:05 PM: at prepare (/opt/build/repo/node_modules/vuepress/lib/prepare/index.js:11:25)4:58:05 PM: at build (/opt/build/repo/node_modules/vuepress/lib/build.js:19:25)4:58:05 PM: at args (/opt/build/repo/node_modules/vuepress/bin/vuepress.js:105:12)4:58:05 PM: at Command.program.command.description.option.option.action (/opt/build/repo/node_modules/vuepress/bin/vuepress.js:42:23)4:58:05 PM: at Command.listener (/opt/build/repo/node_modules/commander/index.js:315:8)4:58:05 PM: at emitTwo (events.js:126:13)4:58:05 PM: at Command.emit (events.js:214:7)4:58:05 PM: at Command.parseArgs (/opt/build/repo/node_modules/commander/index.js:654:12) `4:58:05 PM: at Command.parse (/opt/build/repo/node_modules/commander/index.js:474:21)If I attempt to fix this by adding theme: 'theme', to config.js I end up forcing an NPM build (which also fails):
5:06:09 PM: Executing user command: vuepress build5:06:10 PM: WAIT Extracting site metadata...5:06:10 PM: Error: [vuepress] Failed to load custom theme "theme". File vuepress-theme-theme/Layout.vue does not exist.5:06:10 PM: at resolveOptions (/opt/build/repo/node_modules/vuepress/lib/prepare/resolveOptions.js:69:15)5:06:10 PM: at prepare (/opt/build/repo/node_modules/vuepress/lib/prepare/index.js:11:25)5:06:10 PM: at build (/opt/build/repo/node_modules/vuepress/lib/build.js:19:25)5:06:10 PM: at args (/opt/build/repo/node_modules/vuepress/bin/vuepress.js:105:12)5:06:10 PM: at Command.program.command.description.option.option.action (/opt/build/repo/node_modules/vuepress/bin/vuepress.js:42:23)5:06:10 PM: at Command.listener (/opt/build/repo/node_modules/commander/index.js:315:8)5:06:10 PM: at emitTwo (events.js:126:13)5:06:10 PM: at Command.emit (events.js:214:7)5:06:10 PM: at Command.parseArgs (/opt/build/repo/node_modules/commander/index.js:654:12) `5:06:10 PM: at Command.parse (/opt/build/repo/node_modules/commander/index.js:474:21)I've searched quite a number of pages describing custom themes but everyone apart from the official theme docs describes 'using a custom theme' via the NPM route (as per the official using a theme docs.
What I cannot find in the official docs is a solution to the error
` 4:58:05 PM: Error: [vuepress] Cannot resolve Layout.vue file in .vuepress/theme.
.. which seems to get ignored in the vuepress dev build and fails on a vuepress build on a netlify deploy
Missing out the theme: 'theme', seems to be the cleanest way forward
My working code is on this (GitHub repository)[https://github.com/iandstanley/doggydips.co.uk/tree/netlify-vuejs]
Any pointers on how to get this up and running and avoid these errors?