モジュール導入
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ファイル名と合わせると分かりやすいかも
