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