

main.cssやnormalize.cssのように固定で必ず最初に読み込ませたいsassファイルのコンパイルで困っています。

nuxt-device-detectを使用して、pc/spの表示切り替えを行っているため  
vueファイルにstyle記載やimportを行うとpc表示の時にもspのcssが読み込まれてしまうため、cssはレイアウトのheadで読み込ませているのですが、nuxtjsでホットリロード時にassets配下のsassファイルをstatic配下にcssコンパイルする方法がわかりません。

nuxtjs  
L assets  
| L sass  
| L main.sass  
L 略  
L static  
L css  
L main.css（main.sassがコンパイルされたもの）

index.vue

[code]

    <template>
      <section class="main">
        <div v-if="$device.isMobile">
          <SpTop />
        </div>
        <div v-else>
          <PcTop />
        </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 () {
        return {
          title: "タイトル",
        }
      },
    
    };
    </script>
    
[/code]

pcLayout.vue

[code]

    <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 () {
                return {
                    title: "タイトル",
                    link: [
                        {rel: "stylesheet", href: '/css/normalize.css'},
                        {rel: "stylesheet", href: '/css/master.css'}
                    ]
                }
            },
        };
    </script>
    
[/code]


CC BY-SA 4.0
2018-07-02T04:55:55.617
45227
2020-10-12T17:03:35.410
16768
question
vue.js webpack nuxt.js
nuxtjsのホットリロード時のsassコンパイル


今回は、nuxt-device-
detectを使用して、pc/spの表示切り替えするためにpcLayout.vueとspLayout.vue(?)で読み込むsassファイルを切り替えつつ、ホットリロードで開発したいということだと思います。  
それを実現するために、質問の通りにassetsフォルダの下のsassファイルをstaticフォルダにホットリロードでコンパイルすることができればいいのですが、私にはその方法がわかりませんでした。

そこで、違うアプローチとしてもっとシンプルに実現できそうです。答えは単純でsassファイルをそのままpcLayout.vueでimportすればいいのです。例えばこのようになります。

pcLayout.vue

[code]

    <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>
    
[/code]

この例ではsassではなくscssを使用していますが同じようにできると思います。spの方はこのようになります。

spLayout.vue

[code]

    <template>
        <nuxt/>
    </template>
    
    <script lang="ts">
    import Vue from 'vue'
    // インポートの対象をpcと変えている
    import "~/assets/css/sp_normalize.scss"
    import "~/assets/css/sp_main.scss" 
    
    export default Vue.extend({
        
    })
    </script>
    
[/code]

私が試したところscssファイルを編集して保存したらホットリロードで再コンパイルされてリアルタイムにscssの編集結果が反映されました。

* * *

先に結論を書きましたが、以下の前提条件が必要です。

  1. 必要なモジュールをインストール
[code]     npm install --save-dev node-sass sass-loader @nuxtjs/style-
resources

    
[/code]

  2. nuxt.config.jsでモジュールを読み込む
[code]     module.exports = {

      // 略
      modules: ['@nuxtjs/style-resources']
      // 略
    }
    
[/code]

以上、この２つの手順を踏んだ後に最初に記載した通りの記述（vueファイルでのsassのimport）をすればsassファイルがホットリロードで内部でコンパイルされ、cssが適用されるようになります。


CC BY-SA 4.0
2020-08-01T12:49:44.433
69166
2020-08-01T16:49:38.633
2020-08-01T16:49:38.633
3060
41318
45227
answer