Nuxt.jsでScssを使いたい

モジュール導入

NuxtJsでSCSSを使用するためのモジュールを導入します

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

・node-sass
・sass-loader
・@nuxtjs/style-resources

package.jsonに追加されます

package.json

 "devDependencies": {
   "@nuxtjs/style-resources": "^1.0.0", <--これ
   "node-sass": "^4.14.1",　<--これ
   "pug": "^3.0.0",
   "pug-plain-loader": "^1.0.0",
   "sass-loader": "^9.0.2"　<--これ
  }

nuxt.config.js編集

nuxt.config.js内のmodulesに下記を追記する

nuxt.config.js

  modules: [
    '@nuxtjs/style-resources'
  ],

SCSSファイルの作成、配置

Nuxt.jsでは静的ファイル(CSS,image,SASS)をassetsフォルダ内に配置します

例 assets/css/style.scssを作成

Vueファイルにscssを適用

Vueファイルの<script></script>内にscssファイルをインポートする

sample.vue

<template>
　<h1>Hello World !</h1>
</template>
<script>
// import css files.
import "~/assets/css/style.scss";
</script>

サーバをリロードすると適用されています。

ファイル名

scssファイル名はvueファイル名と合わせると分かりやすいかも

資料

参考資料