Closed iandstanley closed 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:$accentColor
Then 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.styl
So 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.
@iandstanley Please don't delete the issue template.
Seems that you are using 0.x but not 1.x. If you don't provide the version info, it's hard for maintainers to find the problem.
How silly. I installed vuepress 1.x globally with yarn add vuepress@next
to start playing with it. Then when I wanted to deploy to Gitlab I read I had to install locally and forgot that I installed the alpha so just ran yarn add vuepress
in my project which installed 0.x. Changed it to 1.x and working now. Thanks @meteorlxy!
@iandstanley Please don't delete the issue template.
Seems that you are using 0.x but not 1.x. If you don't provide the version info, it's hard for maintainers to find the problem.
i have the same problem, but i use 1.0.0-alpha.48
its part of my package.json `
"devDependencies": { "@babel/cli": "^7.4.4", "@babel/core": "^7.4.5", "@babel/plugin-proposal-object-rest-spread": "^7.4.4", "@babel/preset-env": "^7.4.5", "@babel/preset-es2015": "^7.0.0-beta.53", "babel-loader": "^8.0.6", "clean-webpack-plugin": "^1.0.0", "css-loader": "^1.0.1", "extract-text-webpack-plugin": "^3.0.2", "html-webpack-plugin": "^3.2.0", "markdown-it-vuese": "^0.4.0", "path": "^0.12.7", "vue-loader": "^14.2.3", "vue-server-renderer": "^2.6.10", "vue-template-compiler": "^2.6.10", "vuepress": "^1.0.0-alpha.48", "vuepress-plugin-demo-block": "^0.7.2", "webpack": "^4.26.0", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" }
the error tips `
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:$accentColor at "&:hover" (/Users/luyi2019/Documents/projects/talcloud_seg_fe/Packages/seg-ui/node_modules/@vuepress/theme-default/components/NavLinks.vue:146:31) at ".nav-item > a:not(.external)" (/node_modules/@vuepress/theme-default/components/NavLinks.vue:145:23)
`
i try the same operation with @stevgouws , the same result,and i check my global node_modules,i didnt install vuepress globally
Any help pointing in the right direction would be appreciated.
@iandstanley Please don't delete the issue template. Seems that you are using 0.x but not 1.x. If you don't provide the version info, it's hard for maintainers to find the problem.
i have the same problem, but i use 1.0.0-alpha.48
its part of my package.json `
"devDependencies": { "@babel/cli": "^7.4.4", "@babel/core": "^7.4.5", "@babel/plugin-proposal-object-rest-spread": "^7.4.4", "@babel/preset-env": "^7.4.5", "@babel/preset-es2015": "^7.0.0-beta.53", "babel-loader": "^8.0.6", "clean-webpack-plugin": "^1.0.0", "css-loader": "^1.0.1", "extract-text-webpack-plugin": "^3.0.2", "html-webpack-plugin": "^3.2.0", "markdown-it-vuese": "^0.4.0", "path": "^0.12.7", "vue-loader": "^14.2.3", "vue-server-renderer": "^2.6.10", "vue-template-compiler": "^2.6.10", "vuepress": "^1.0.0-alpha.48", "vuepress-plugin-demo-block": "^0.7.2", "webpack": "^4.26.0", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" }
the error tips `
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:$accentColor at "&:hover" (/Users/luyi2019/Documents/projects/talcloud_seg_fe/Packages/seg-ui/node_modules/@vuepress/theme-default/components/NavLinks.vue:146:31) at ".nav-item > a:not(.external)" (/node_modules/@vuepress/theme-default/components/NavLinks.vue:145:23)
`
i try the same operation with @stevgouws , the same result,and i check my global node_modules,i didnt install vuepress globally
Any help pointing in the right direction would be appreciated.
i tried 43-48,they all hav this problem in my project i use npm
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 build
5: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?