【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
2020年10月より入社しました!業務では主にフロントエンドを担当しております!

最新記事 by Kazuki Hakozaki (全て見る)
- 【Nuxt.js】新規プロジェクトからScss周りの環境構築 - 2021.1.26
- 【PHP】アメブロRSSでブログ記事を取得してサイトに埋め込む方法 - 2020.12.25
- 【Nuxt.js】vue-masonryを使用して要素をタイル状に表示する - 2020.12.18