I am trying to have an image in my project but when I build the project the image is not included in the build. Does someone know why? I am using sveltekit and vite. Here is the github: https://github.com/CloudyWhale/personal-website. The name of the photo is trashCan.svg and it is in the static folder.
Here is the build log:
> tailwind-svelte#0.0.1 build
> vite build
vite v2.9.13 building for production...
✓ 14 modules transformed.
.svelte-kit/output/client/_app/immutable/manifest.json 1.21 KiB
.svelte-kit/output/client/_app/immutable/layout.svelte-85bee214.js 0.53 KiB / gzip: 0.35 KiB
.svelte-kit/output/client/_app/immutable/error.svelte-b3f7066d.js 1.56 KiB / gzip: 0.75 KiB
.svelte-kit/output/client/_app/immutable/pages/index.svelte-46e2bffd.js 3.68 KiB / gzip: 1.80 KiB
.svelte-kit/output/client/_app/immutable/start-5d947e25.js 22.66 KiB / gzip: 8.58 KiB
.svelte-kit/output/client/_app/immutable/assets/pages/index.svelte-74cec484.css 6.91 KiB / gzip: 1.84 KiB
.svelte-kit/output/client/_app/immutable/chunks/index-7fb2b6d1.js 7.15 KiB / gzip: 2.91 KiB
vite v2.9.13 building SSR bundle for production...
✓ 12 modules transformed.
Generated an empty chunk: "hooks"
.svelte-kit/output/server/manifest.json 1.17 KiB
.svelte-kit/output/server/index.js 74.35 KiB
.svelte-kit/output/server/entries/fallbacks/layout.svelte.js 0.24 KiB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js 0.72 KiB
.svelte-kit/output/server/entries/pages/index.svelte.js 14.22 KiB
.svelte-kit/output/server/chunks/index-5f038599.js 2.31 KiB
.svelte-kit/output/server/chunks/hooks-1c45ba0b.js 0.00 KiB
Run npm run preview to preview your production build locally.
(node:89537) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Edit: I forgot to mention this earlier but I am also having this issue when I am building it on my own device
How files are built/output depends on the adapter. With #sveltejs/adapter-node, for example, the assets from public will be copied to the client sub-directory of the output.
If your adapter does not handle the public directory as expected, consider moving your assets to the "official" SvelteKit asset directory, which is static.
Related
My firebase project has been working perfectly fine. The problem arises as it took me ages to launch the project on vercel and netlify. What are some common issues within it as I cannot import all of the codes
I refreshes my browser, restarted my computer, uploaded my repo on github again....nothing seems to work
This is the result of the vercel building part
[23:23:56.333] Cloning github.com/dunyanong/Feedback-Form (Branch: main, Commit: 368a226)
[23:23:58.531] Cloning completed: 2.198s
[23:24:00.965] Looking up build cache...
[23:24:01.269] Build Cache not found
[23:24:01.382] Running "vercel build"
[23:24:02.031] Vercel CLI 28.2.2
[23:24:02.361] Installing dependencies...
[23:24:03.384]
[23:24:03.384] up to date in 768ms
[23:24:03.384]
[23:24:03.385] 19 packages are looking for funding
[23:24:03.385] run `npm fund` for details
[23:24:03.401] Detected `package-lock.json` generated by npm 7+...
[23:24:03.401] Running "npm run build"
[23:24:03.787]
[23:24:03.787] > login-form#1.0.0 build
[23:24:03.787] > webpack
[23:24:03.788]
[23:24:05.262] asset bundle.js 1010 KiB [compared for emit] (name: main)
[23:24:05.262] runtime modules 891 bytes 4 modules
[23:24:05.262] modules by path ./node_modules/ 937 KiB
[23:24:05.262] modules by path ./node_modules/#firebase/ 926 KiB
[23:24:05.263] ./node_modules/#firebase/app/dist/esm/index.esm2017.js 32.6 KiB [built] [code generated]
[23:24:05.263] ./node_modules/#firebase/firestore/dist/index.esm2017.js 760 KiB [built] [code generated]
[23:24:05.263] ./node_modules/#firebase/component/dist/esm/index.esm2017.js 16.5 KiB [built] [code generated]
[23:24:05.263] ./node_modules/#firebase/util/dist/index.esm2017.js 66.1 KiB [built] [code generated]
[23:24:05.263] + 2 modules
[23:24:05.264] modules by path ./node_modules/firebase/ 901 bytes
[23:24:05.264] ./node_modules/firebase/app/dist/index.esm.js 826 bytes [built] [code generated]
[23:24:05.264] ./node_modules/firebase/firestore/dist/index.esm.js 75 bytes [built] [code generated]
[23:24:05.264] ./node_modules/idb/build/index.js 3.09 KiB [built] [code generated]
[23:24:05.264] ./node_modules/idb/build/wrap-idb-value.js 7.32 KiB [built] [code generated]
[23:24:05.265] ./src/index.js 1.44 KiB [built] [code generated]
[23:24:05.265] webpack 5.74.0 compiled successfully in 976 ms
I'm using Webpack to bundle my React + Typescript app and want to use SASS for styling. I was able to add SASS compilation and inclusion of styles by using the sass-loader, css-loader and style-loader like this:
rules: [
...,
{
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
}
]
However, I now want to add the mini-css-extract-plugin to extract the compiled CSS to a separate file, but I can't get it to work:
plugins: [
new MiniCssExtractPlugin({
filename: 'main.css',
})
],
...,
rules: [
...,
{
test: /\.(scss|css)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
I'm not getting any errors, but I don't see any file by the name of main.css being created. How do I get this to work?
asset bundle.js 274 KiB [emitted] [minimized] [big] (name: main) 1
related asset
asset main.css 107 bytes [emitted] (name: main)
Entrypoint main [big] 274 KiB = main.css 107 bytes bundle.js 274 KiB
runtime modules 1000 bytes 5 modules
orphan modules 769 bytes [orphan] 4 modules
cacheable modules 468 KiB
modules by path ./node_modules/webpack-dev-server/ 21.2 KiB 12 modules
modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/webpack/hot/*.js 1.42 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB
./node_modules/scheduler/index.js 198 bytes [built] [code generated]
./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB
[built] [code generated]
./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Style/Main.scss 106 bytes [code generated]
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
bundle.js (274 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (274 KiB)
main.css
bundle.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
webpack 5.11.0 compiled with 3 warnings in 7223 ms
ℹ ｢wdm｣: Compiled with warnings.
The problem is you missed to include your main css file into your webpack entry point so no css files found.
As long as you import your main css file, then it would work:
index.tsx
import "./Style/Main.scss";
I want to use flag-icon-css with angular2/4 .
I setted up flag-icon-css using npm install flag-icon-css
and added ./node_modules/flag-icon-css/flag-icon.min.css in webpack styles.
looking at npm start output, it looks like all svg files are renamed :
ad.a58027d893be40137b4e.svg 55.6 kB [emitted]
ae.9df491b1067fe429b98a.svg 273 bytes [emitted]
af.66d30d603494af84757f.svg 33.6 kB [emitted]
ag.0c113ee43f5e979f9e2b.svg 862 bytes [emitted]
ai.d6af3a0faf03775fead4.svg 58.2 kB [emitted]
al.7e21b4962e704ec70f96.svg 4.91 kB [emitted]
am.15d9b1b398267457715f.svg 242 bytes [emitted]
ao.ea04172c141ba985f772.svg 2.25 kB [emitted]
aq.2c772185d13c70791c11.svg 4.61 kB [emitted]
ar.738ab0020d69c00a1d1b.svg 4.56 kB [emitted]
as.5d5e432322a2db51180a.svg 11.5 kB [emitted]
.....
I suppose this is why I can not see flags ?
In case somebody's still looking for it in Angular6, I added
"node_modules/flag-icon-css/css/flag-icon.css"
to angular.json's "styles" and it worked.
I am not completely sure it is the right way, but inserting the css file in my component was finally running.... :
styleUrls: ['../../../node_modules/flag-icon-css/css/flag-icon.css']
For some reason, gulp-inject recently started taking a long time (3 minutes). Previously it would take a few seconds. I'm not sure where to begin when diagnosing this issue. Here's my output:
[18:04:39] gulp-inject 1 files into index.html.
[18:04:39] gulp-inject 277 files into index.html.
[18:04:39] Finished 'inject' after 380 ms
[18:04:39] Starting 'html'...
[18:04:39] gulp-inject 1 files into index.html.
[18:07:40] 'dist/' styles/app-9bd553d2.css 284.75 kB
[18:07:40] 'dist/' styles/vendor-28fa652f.css 188.21 kB
[18:07:40] 'dist/' scripts/vendor-2308930e.js 1.93 MB
[18:07:40] 'dist/' scripts/app-efe218d1.js 368.71 kB
[18:07:40] 'dist/' index.html 769 B
[18:07:40] 'dist/' all files 2.77 MB
[18:07:40] Finished 'html' after 3.02 min
Is there a verbose option that I'm not aware of? Any help would be appreciated.
Probably it's not gulp-inject which is slow. It's minification of JS/CSS which is slow. If you do something like this in your gulp build file
.pipe(config.production ? $.uglify() : $.util.noop())
.pipe(config.production ? $.csso() : $.util.noop()
.pipe(config.production ? $.htmlmin() : $.util.noop())
(you can read how to have this config.production variable in you script here: https://knpuniversity.com/screencast/gulp/minify-only-production )
Then most likely it will dramatically speed-up your build procedure in a non-production environment.
I am able to compile my web page using Google's Web App Starter Kit. However, upon running gulp serve:dist, my page is brought up with a different looking font than the default Roboto Condensed I expect. Instead, the font changes to what seemingly looks like default Roboto.
Terminal log does not indicate any errors and my dist folder indicates that I all my fonts are of Roboto Condensed. I've also tried testing on both chrome and safari but both show a different font:
~> gulp serve:dist
[21:26:17] Using gulpfile ~/dev/xxxx/gulpfile.js
[21:26:17] Starting 'clean'...
[21:26:17] Finished 'clean' after 33 ms
[21:26:17] Starting 'default'...
[21:26:17] Starting 'styles'...
[21:26:20] styles all files 92.91 kB
[21:26:20] Finished 'styles' after 2.6 s
[21:26:20] Starting 'jshint'...
[21:26:20] Starting 'html'...
[21:26:21] Starting 'images'...
[21:26:22] Starting 'fonts'...
[21:26:22] Starting 'copy'...
[21:26:22] Finished 'jshint' after 2.51 s
[21:26:23] html all files 51.2 kB
[21:26:23] Finished 'html' after 3.22 s
[21:26:24] copy all files 53.49 kB
[21:26:24] Finished 'copy' after 2.41 s
[21:26:25] fonts all files 1.09 MB
[21:26:25] Finished 'fonts' after 2.82 s
[21:26:25] images all files 27.96 MB
[21:26:25] Finished 'images' after 3.75 s
[21:26:25] Finished 'default' after 7.76 s
[21:26:25] Starting 'serve:dist'...
[21:26:25] Finished 'serve:dist' after 59 ms
[WSK] Local URL: http://localhost:3000
[WSK] External URL: http://xx.xx.xxx.xxx:3000
[WSK] Serving files from: dist
Anyone know how I can preserve the original Roboto Condensed font in the dist build? Thanks