【Nuxt.js】新規プロジェクトからScss周りの環境構築（Node v16対応）
ハコザキです。
今回はNuxt.jsプロジェクトに導入するScss周りの環境構築をご紹介します！
Nuxt.jsプロジェクトの新規作成についてはこちら
Nodeのバージョンは16.8.0で進めていきます！
Dart Sass について
今回はDart Sassをインストールします。
Dart Sass は 公式で推奨しており、新機能が先行実装されます。
一方、Node Sassもインストールできますがこちらは非推奨（Node.jsのバージョンに依存..）となっております。
インストール
下記コマンドで必要ライブラリインストール
yarn add -D sass sass-loader@10Scssで記載したいvueファイルのstyleタグを下記のようにするとscssでかけます
scopedはこのファイルのみにcss適用するという意味です（他コンポーネントには適用させない）
<style lang="scss" scoped>
.test {
&_inner {
/* Your code... */
}
}
</style>全ページに適用させるscssファイル
aタグのhoverのイベントなど全ページ共通で定義したい場合、
一つのファイルにまとめて書いておくとわかりやすくて良いです。
~/assets/scss/フォルダ内にcommon.scssを作成
a {
text-decoration: none;
transition: 0.3s;
color: inherit;
&:hover {
opacity: 0.7;
}
}
nuxt.config.jsに追記
css: [
{ src: '~/assets/scss/common.scss' },
],これでokです！
変数定義用のscssファイルの利用について
変数定義用のファイルを一つのファイルにまとめ、
全コンポーネントファイルで変数を使えるようにするための設定です
~/assets/scss/フォルダ内に_variable.scssを作成
// メディアクエリ
$pc: 'only screen and (min-width:769px) ';
$sp: 'only screen and (max-width:769px) ';
// 使用するカラー
$colorDarkPink: #ff6666;
// @include flex(center, center);
@mixin flex($justify-content: unset, $align-items: unset) {
display: flex;
justify-content: $justify-content;
align-items: $align-items;
}下記コマンドでライブラリインストール
yarn add @nuxtjs/style-resourcesnuxt.config.jsに追記
modules: [
...
'@nuxtjs/style-resources',
],
...
styleResources: {
scss: ['~/assets/scss/_variable.scss'],
},これでokです！
