Open butameron opened 5 years ago
butameron
commented
5 years ago 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.
DaleMatthews
commented
5 years ago This is still happening in vuepress 1.0.3. Simply importing main.css in index.styl in a bare-bones example:
[WDS] Errors while compiling. Reload prevented. index.js:150:9
./node_modules/@vuepress/core/.temp/style.styl (./node_modules/css-loader/dist/cjs.js??ref--13-oneOf-1-1!./node_modules/postcss-loader/src??ref--13-oneOf-1-2!./node_modules/stylus-loader??ref--13-oneOf-1-3!./node_modules/@vuepress/core/.temp/style.styl)
Module not found: Error: Can't resolve './main.css' in '/Users/dalematthews/workspace/vuepress-blog/node_modules/@vuepress/core/.temp'
vultur
commented
4 years ago 派生主题使用 background-image url(search.svg) 存在同样的问题！
临时方案：
background-image url(/search.svg) // 使用绝对路径，search.svg 存放在 .vuepress/public 目录
期望结果： 可在派生主题使用相对路径资源
meteorlxy
commented
4 years ago One possible solution is to copy all "unknown" files from .vuepress to .temp.
So the workaround could be something like:
// .vuepress/styles/index.styl
body
background-image url(./test.png)// .vuepress/config.js
module.exports = {
plugins: [
[require('./workaroundPlugin')]
]
}// .vuepress/workaroundPlugin.js
const fs = require('fs-extra');
const path = require('path');
const globby = require('globby');
module.exports = (options, ctx) => {
return {
async ready() {
const paths = await globby(['styles/**/*.{svg,png,jpg,ttf,woff,woff2}'], {
cwd: ctx.vuepressDir
});
const copyFiles = []
paths.forEach(item => {
copyFiles.push(
fs.copy(
path.resolve(ctx.vuepressDir, item),
path.resolve(ctx.tempPath, item.replace(/^styles\//, ''))
)
)
})
await Promise.all(copyFiles)
}
}
}
wesgro
commented
4 years ago It does not look like its possible to reference files in your public assets directory from css?
When I try to do something like
.class {
background-image: url('./assets/images/thing.svg');
}I get the same errors:
./docs/.vuepress/theme/components/SidebarGroup.vue?vue&type=style&index=0&lang=
scss& (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist
/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!/Users/-/Projects/skyline/node_modules/sass-loader/dist/cjs.js??ref--10-oneOf-1-3!/Users/-/Projects/skyline/node_modules/style-resources-loader/lib??ref--10-oneOf-1-4!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./docs/.vuepress/theme/components/SidebarGroup.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './assets/svgs/light/home-heart.svg' in 'vuepress/docs/.vuepress/theme/components'
bozau
commented
4 years ago 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.
Bug report
Version
1.0.0-alpha.47
Steps to reproduce
What is expected?
test.png is copied to asset dir by webpack. build complete successfully.
What is actually happening?
build failed with follwing error.
Other relevant information