BLOG

【Nuxt.js】新規プロジェクトからScss周りの環境構築

2021.1.26
TECH

ハコザキです。
今回はNuxt.jsプロジェクトに導入するScss周りの環境構築をご紹介します！

Nuxt.jsプロジェクトの新規作成についてはこちら

Dart Sass について

今回はDart Sassをインストールします。

Dart Sass は 公式で推奨しており、新機能が先行実装されます。
一方、Node Sassもインストールできますがこちらは非推奨（Node.jsのバージョンに依存..）となっております。

公式サイト

インストール

下記コマンドで必要ライブラリインストール

yarn add -D sass sass-loader fibers

nuxt.config.jsに追記

変更箇所のみ記載してます

import Sass from 'sass'
import Fiber from 'fibers'

export default {
  ...
  build: {
    loaders: {
      scss: {
        implementation: Sass,
        sassOptions: {
          fiber: Fiber
        }
      }
    }
  }
}

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です！

※ sass-loaderでエラーが出る場合（2021.02.12 追記）

TypeError: this.getOptions is not a function
    at Object.loader ({path}/node_modules/sass-loader/dist/index.js:25:24)

上記のようなエラーが出る場合があります。

sass-loaderのバージョンが11.0.0の場合、vueの2.6.12と対応していないみたいなので
下記コマンドでsass-loaderをダウングレードする事で解決します。

# sass-loaderのバージョンを下げる
yarn add -D sass-loader@10.1.1

sass-loaderのバージョンはpackage.jsonに、
vueのバージョンはyarn.lock内に記載されています！（”vue@^”で検索すると出てきます！）

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

Kazuki Hakozaki

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

RELATED ARTICLE