今回はNuxt.jsでのSCSSの導入方法とスタイル環境の構築例について
備忘録も兼ねてご紹介したいと思います。
インストール
今回はDart Sassを導入します。
以前はLibSassを使用していましたが2020年10月に非推奨となり今後は新機能の追加が行われないようです。
Dart Sassは開発が盛んで公式としても使用を推奨しています。
下記コマンドで必要ライブラリをインストール
yarn add --dev sass sass-loader fibersnuxt.config.jsに追加
インストールが終わったらnuxt.confing.jsに以下のような形でモジュールの読み込みとSCSSのオプションを追加します。
// モジュール読み込みを追加
const Sass = require('sass')
const Fiber = require('fibers')
export default {
// SCSSオプションを追加
build: {
loaders: {
scss: {
implementation: Sass,
sassOptions: {
fiber: Fiber
}
}
}
}
}サイト共通のスタイルシート作成
サイト全体で使用したいスタイルがある場合、
サイト全体で使えるSCSSファイルを用意しておくと便利です。
assetsの下にscssというディレクトリを作成し、その中にサイト全体で使用する
スタイルシートを作成していきます。
サイト全体のスタイル用
assets/scss/common.scss
@import "core/variables";
@import "core/mixin";
// サイト全体のスタイルサイト全体の変数用
全コンポーネントファイルで変数を使用するためのファイルを作成します。
assets/scss/core/_variables.scss
// font
$base-font-size: 16px;
$base-font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
// Color
$white: #fff;
$black: #000;
$default-color: #231815;サイト全体のミックスイン用
assets/scss/core/_mixin.scss
@mixin lg-icon-btn (
$width: 515px,
$color: #fff,
$font-size: 20px,
$sp-font-size: 18px,
$icon-size: 25px,
$sp-icon-size: 22px
){
.v-btn {
width: $width;
color: $color;
font-size: $font-size;
@media screen and (max-width: 960px) {
width: 100%;
font-size: $sp-font-size;
}
}
.v-icon {
font-size: $icon-size;
@media screen and (max-width: 960px) {
font-size: $sp-icon-size;
}
}
}ライブラリインストール
yarn add --dev @nuxtjs/style-resourcesnuxt.config.jsに追加
nuxt.config.jsのmodulesにライブラリを追加し、
styleResourcesに今回追加したサイト全体で使用するSCSSファイルを追加します。
modules: [
'@nuxtjs/style-resources',
],
styleResources: {
scss: ['~/assets/scss/common.scss'],
},以上で設定は完了です。
お疲れさまでした！