BLOG

【Nuxt.js】新規プロジェクトからScss周りの環境構築（Node v16対応）

2022.1.24
TECH

ハコザキです。
今回は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@10

Scssで記載したい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-resources

nuxt.config.jsに追記

modules: [
  ...
  '@nuxtjs/style-resources',
],
...
styleResources: {
  scss: ['~/assets/scss/_variable.scss'],
},

これでokです！

The following two tabs change content below.
Kazuki Hakozaki
Twitter のプロフィール

Kazuki Hakozaki

2020年10月より入社しました！業務では主にフロントエンドを担当しております！

RELATED ARTICLE