Nuxt.jsでSass記述ができるようにする方法

Nuxt.jsでSass記述ができるようにする方法

ターミナルで下記コマンドを実行します。

npm install --save-dev node-sass sass-loader

pugなどまとめてインストールしたい場合は下記で実行できます。

npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-loader

package.jsonを見ることでインストールされていることが確認できます。

これでNuxt.jsでもSass記述ができるようになります。

・SASS記法の場合

index.vue

<style lang="sass" scoped>
  .done
       font-size: 20px
       background: blue
</style>

・SCSS記法の場合

index.vue

<style lang="scss" scoped>
div {
    margin: 0 auto;
    p {
        padding: 10px;
        span {
             color: aqua;
        }
    }
}
</style>

scopedを記述することにより、そのファイル内だけにcssを適用することができます。