I'm having trouble compiling the sass file that I want to read first, fixedly, like main.css or normalize.css.
because we are using nuxt-device-detect to toggle the display of pc/sp If you type or import in the vue file, sp css will be loaded when pc is displayed, so I have css read in the layout head, but I don't know how to compile the sss file under assets under static when hot reloading with nuxtjs.
Lmain.css (compiled with main.sass)
vue.js webpack nuxt.js
This time, we would like to use nuxt-device-detect to switch the display of pc/sp by hot reload while switching between pcLayout.vue and spLayout.vue(?).
To do that, I wish I could hot-reload the sass file under the assembets folder to the static folder as you asked me, but I didn't know how to do that.
Therefore, it seems that it can be realized more simply as a different approach.The answer is simple: just import the sass file as pcLayout.vue.For example:
This example uses scss instead of sass, but I think we can do the same.This is what sp looks like.
I tried editing and saving the scss file, and it was hot-reloaded and recompiled to reflect the scss editing results in real time.
As I wrote the conclusion earlier, the following prerequisites are required:
Install Required Modules
Load modules in nuxt.config.js
Now, if you follow these two steps and follow the first description (importing the sass in the vue file), the sass file will be hot-reloaded internally and css will be applied.
© 2022 OneMinuteCode. All rights reserved.