sass compilation on hot reload of nuxtjs

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.

nuxtjs
　Passets
　| Lass
　| Lmain.sass
　L approximately
　Lstatic 　　Lcss
　　　Lmain.css (compiled with main.sass)

index.vue

<template>
  <section class="main">
    <div v-if="$device.isMobile">
      <SpTop of >
    </div>
    <div v-else>
      <PcTop of >
    </div>
  </section>
</template>

<script>
import PcTop from '~/components/pc/Top.vue';
import SpTop from '~/components/sp/Top.vue';

export default {
    layout:(ctx)=>ctx.isMobile?'mobile': 'default',
    components: {
        PcTop,
        SpTop
    },

  head(){
    US>return{
      title: "Title",
    }
  },

};
</script>

pcLayout.vue

<template>
  <div>
    <CommonHeader/>
    <nuxt/>
    <CommonFooter/>
  </div>

</template>

<script>
    import CommonHeader from '../components/pc/common/Header.vue';
    import CommonFooter from '../components/pc/common/Footer.vue';

    export default {
        name: 'App',
        components: {
            CommonHeader,
            CommonFooter
        },
        head(){
            US>return{
                title: "Title",
                link: [
                    {rel:"stylesheet", href:'/css/normalize.css',
                    {rel:"stylesheet", href:'/css/master.css'}
                ]
            }
        },
    };
</script>

vue.js webpack nuxt.js

2022-09-30 11:03

1 Answers

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:

pcLayout.vue

<template>
    <nuxt/>
</template>

<script lang="ts">
import Vue from 'vue'
import "~/assets/css/pc_normalize.scss"
import "~/assets/css/pc_main.scss"

export default Vue.extend({
    
})
</script>

This example uses scss instead of sass, but I think we can do the same.This is what sp looks like.

spLayout.vue

<template>
    <nuxt/>
</template>

<script lang="ts">
import Vue from 'vue'
// I have changed the import target to pc.
import "~/assets/css/sp_normalize.scss"
import "~/assets/css/sp_main.scss" 

export default Vue.extend({
    
})
</script>

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

npm install -- save-dev node-assass-loader @nuxtjs/style-resources

Load modules in nuxt.config.js

module.exports={
  // approximately
  modules: ['@nuxtjs/style-resources' ]
  // approximately
}

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-09-30 11:03

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656