it is been about four months that i am working on this project. it is totally okay in development version but when i build the project and upload it to server some of my styles won't be applied.
for more information i have imported styles both in components.
<style>
</style>
and assets css file.
assets\css\style.css
i don't know is it right to do or not?
i get this error for the first time i type npm run build in vs code terminal
first time npm run build
**✖ Nuxt Fatal Error**
Error: EPERM: operation not permitted, mkdir
'C:\Users\rsh\folder\project\.nuxt\components'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myproject@1.0.0 build: `nuxt build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myproject@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\rsh\AppData\Roaming\npm-cache\_logs\2022-01-17T10_43_05_599Z-debug.log
but for the second time it will build the project within a few warnings.
when it is built after second try
npm run build
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
fonts/materialdesignicons-webfont.b26c938.eot (550 KiB)
fonts/materialdesignicons-webfont.3073b3f.woff (265 KiB)
fonts/materialdesignicons-webfont.bfd0d90.ttf (550 KiB)
fonts/icofont.9c33516.woff2 (525 KiB)
fonts/icofont.dad3acc.woff (630 KiB)
img/signin.1455693.svg (846 KiB)
6871893.js (376 KiB)
f031b5e.js (369 KiB)
bc52125.js (376 KiB)
0a7bf8a.js (371 KiB)
20d9dc3.js (673 KiB)
4ab266a.js (401 KiB)
5e1927c.js (1.35 MiB)
6796184.js (2.52 MiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (1000 KiB). This can impact web performance.
Entrypoints:
app (3.42 MiB)
7f9ae0b.js
4fe44c5.js
6796184.js
20d9dc3.js
after
npm run build
ERROR Failed to compile with 3 errors friendly-errors 14:13:07
ERROR in ./.nuxt/views/app.template.html friendly-errors 14:13:07
Module build failed (from ./node_modules/html-webpack-plugin /lib/loader.js): friendly-errors 14:13:07
Error: ENOENT: no such file or directory, open 'C:\Users \rsh\project1\.nuxt\views\app.template.html'
friendly-errors 14:13:07
ERROR in ./.nuxt/client.js friendly-errors 14:13:07
Module build failed (from ./node_modules/babel-loader/lib/index.js): friendly-errors 14:13:07
Error: ENOENT: no such file or directory, open 'C:\Users\rsh\project1\.nuxt\client.js'
friendly-errors 14:13:07
@ multi ./node_modules/eventsource-polyfill/dist/browserify- eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000& ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
friendly-errors 14:13:07
error
when i type nuxt build in vs code terminal
i get this error
with nuxt build
nuxt : The term 'nuxt' is not recognized as the name of a cmdlet, function, script file, or operable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ nuxt build
+ ~~~~
+ CategoryInfo : ObjectNotFound: (nuxt:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
i would really appreaciate it if someone can help me with it or just share same experience
i solved my issue by adding this paragraph to nuxt.config.js build configuration.
that's actually what i figured out about it. i've had imported my styles inline,in assets files and Vue components style tag this code will extract all my CSS to a single file (according to Nuxt documention) and sync development vs production styles and overwrite styles over Vuetify.
extractCSS: {
ignoreOrder: true
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css|vue)$/,
chunks: 'all',
enforce: true
}
}
}
},
i hope this would help you too.