Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8655

Nuxt.jsでScssを使いたい

$
0
0

モジュール導入

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

資料

参考資料


Viewing all articles
Browse latest Browse all 8655

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>