Relative image url in index.styl causes build failure

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

Bug report

Version

1.0.0-alpha.47

Steps to reproduce

$ yarn add vuepress@next
$ echo '# Hello VuePress' > README.md
$ mkdir .vuepress
$ mkdir .vuepress/styles
$ echo 'body { background-image: url(./test.png); }'  > .vuepress/styles/index.styl
$ wget https://upload.wikimedia.org/wikipedia/commons/5/53/Wikipedia-logo-en-big.png -O .vuepress/styles/test.png
$ npx vuepress build

What is expected?

test.png is copied to asset dir by webpack. build complete successfully.

What is actually happening?

build failed with follwing error.

$ npx vuepress build
wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
[3:37:08 AM] Compiling Client
[3:37:09 AM] Compiling Server
[3:37:17 AM] Compiled Server in 8s
[3:37:23 AM] Compiled Client in 15s
(undefined) ./node_modules/@vuepress/core/.temp/style.styl
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './test.png' in '/mnt/e/Temp/vuepress-test/node_modules/@vuepress/core/.temp'
    at factory.create (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/Compilation.js:823:10)
    at factory (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /mnt/e/Temp/vuepress-test/node_modules/neo-async/async.js:2825:7
    at /mnt/e/Temp/vuepress-test/node_modules/neo-async/async.js:6886:13
    at normalResolver.resolve (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/mnt/e/Temp/vuepress-test/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/mnt/e/Temp/vuepress-test/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/mnt/e/Temp/vuepress-test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at resolver.doResolve (/mnt/e/Temp/vuepress-test/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/mnt/e/Temp/vuepress-test/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/mnt/e/Temp/vuepress-test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at hook.callAsync (/mnt/e/Temp/vuepress-test/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/mnt/e/Temp/vuepress-test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (/mnt/e/Temp/vuepress-test/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
 @ ./node_modules/@vuepress/core/lib/node/internal-plugins/style/client.js 2:0-26
 @ ./node_modules/@vuepress/core/.temp/app-enhancers/0.js
 @ ./node_modules/@vuepress/core/.temp/internal/app-enhancers.js
 @ ./node_modules/@vuepress/core/lib/client/app.js
 @ ./node_modules/@vuepress/core/lib/client/clientEntry.js
 @ multi ./node_modules/@vuepress/core/lib/client/clientEntry.js
Error: Failed to compile with errors.
    at webpack (/mnt/e/Temp/vuepress-test/node_modules/@vuepress/core/lib/node/build/index.js:186:16)
    at finalCallback (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/MultiCompiler.js:247:12)
    at runWithDependencies.err (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/MultiCompiler.js:270:6)
    at done (/mnt/e/Temp/vuepress-test/node_modules/neo-async/async.js:2928:13)
    at runCompilers (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/MultiCompiler.js:174:48)
    at err (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/MultiCompiler.js:181:7)
    at compiler.run (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/MultiCompiler.js:263:7)
    at finalCallback (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/Compiler.js:220:39)
    at hooks.done.callAsync.err (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/Compiler.js:236:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/mnt/e/Temp/vuepress-test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:33:1)
    at AsyncSeriesHook.lazyCompileHook (/mnt/e/Temp/vuepress-test/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/Compiler.js:234:21)
    at hooks.afterCompile.callAsync.err (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/Compiler.js:631:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/mnt/e/Temp/vuepress-test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/mnt/e/Temp/vuepress-test/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (/mnt/e/Temp/vuepress-test/node_modules/webpack/lib/Compiler.js:628:31)

Other relevant information

• Your OS: Ubuntu 18.04.1 LTS on WSL
• Node.js version: v11.6.0
• Browser version: -
• Is this a global or local install? local
• Which package manager did you use for the install? yarn
• Does this issue occur when all plugins are disabled? yes

[bozau]

Hi @bencodezen,

I’m a new user to both Vue and Vuepress, but I started to do some theming and this specific issue with ‘styl’ files and image references nearly caused me to stop even considering using Vuepress 😦 after a number of hours just trying to get the ‘styl’ files working.

EDIT: So, attempting with the following: .class{ background-image: url( /img/bg.jpg ) } is successful with a /img directory in the .vuepress/public. This issue isn’t referenced/doco’d anywhere about the url reference not having periods or tilde’s prior /img/bg.jpg is it?

I was wondering if there was a supported way to fix this issue? As it might cause others who come across this issue to not use it.

Kind Regards.

Bozza.

[butameron]

In addition, I also tested on index.styl of theme, and it seems to have the same problem.

In case of .vuepress/styles, I think I can use .vuepress/public to store image files and write absolute url into styl file. However, in case of styles/index.styl of theme dir, I will need to add copy config to chainWebpack manually.

Even if this is not a bug, this is very inconvenience.