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ファイル名と合わせると分かりやすいかも
資料
Author And Source
この問題について(Nuxt.jsでScssを使いたい), 我々は、より多くの情報をここで見つけました https://qiita.com/majka/items/ab35d0d4581a9480a136著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .