-
-
Notifications
You must be signed in to change notification settings - Fork 6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cannot load font files referenced in a node_modules css file #1618
Comments
Update : I did a dirty workaround with rollup-plugin-copy: import type { UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import copy from 'rollup-plugin-copy'
const config: UserConfig = {
plugins: [
vue(),
copy({
targets: [
{ src: './node_modules/@company/css-library/assets/fonts/**/*', dest: 'public/fonts' },
{ src: './node_modules/@company/css-library/assets/img/**/*', dest: 'public/img' }
]
})
],
alias: {
'@': resolve(__dirname, 'src')
}
}
export default config But |
This should work as expected, can't reproduce. No actionables until a valid reproduction is provided. |
@yyx990803 Then I guess there's something wrong either on my project, or on its dependency. I got a small reproduction repo at https://github.com/scambier/test-vite-app There are two folders:
Thank you for your time. |
You can solve it with postcss //postcss.config.js
const path = require('path');
module.exports = {
plugins: {
'postcss-import': {},
'postcss-url': [
{
filter: t => {
//console.log(t, /([a-zA-Z0-9\s_\\.\-\(\):])+(.woff|.woff2)$/i.test(t.url));
return /([a-zA-Z0-9\s_\\.\-\(\):])+(.woff|.woff2)$/i.test(t.url);
},
url: 'copy',
assetsPath:
process.env.NODE_ENV === 'production'
? './'
: path.resolve(__dirname, '.vite_temp/fonts'),
useHash: process.env.NODE_ENV !== 'production',
hashOptions: {append: true},
},
],
tailwindcss: {},
autoprefixer: {},
},
}; |
It works for
And if I add an I'll continue with my workaround in the meantime, thank you though :) |
It's the same issue as #1629 and is fixed in beta.37. |
Describe the bug
I'm working on a new project at work, and we're using a node_modules dependency containing all the company css. The css file itself loads Font Awesome files with relative paths:
I import the dependency like this in App.vue
The issue is that the FA fonts are then loaded relatively to the
./src
folder, which leads to this 404 error in the browser:GET http://localhost:3000/fonts/fa/fa-solid-900.woff2 net::ERR_ABORTED 404 (Not Found)
How can I solve this?
Reproduction
I cannot share the source, but I guess that the issue will arise with any css in a node_modules dep, that will load a font file with a relative path.
System Info
vite
version: ^2.0.0-beta.34Logs (Optional if provided reproduction)
The text was updated successfully, but these errors were encountered: