Nuxt.jsでSassを使う

2020年6月20日

当サイトにはプロモーション・広告が含まれています。

この記事は最終更新日から 4 年以上が経過しており、内容が古くなっている可能性があります。

Nuxt.js の基本の CSS フレームワークTailwind CSSとは別に、独自の CSS スタイルを記述する用の CSS（Sass）を追加する。

Sass のインストール

npm install --save-dev node-sass sass-loader
// or
yarn add --dev node-sass sass-loader

assetsディレクトリ配下に.scssファイルを作成する。

assets/
    scss/
        _variables.scss
        _base.scss
        style.scss

_variables.scss は関数用、_base.scss には基本の Sass を記述していく。2 つのファイルを style.scss に@importで読み込む。

@charset "utf-8";

@import "_variables";
@import "_base";

グローバル CSS として使えるように、nuxt.config.js に設定する。

  /*
  ** Global CSS
  */
  css: [
    { src: '~/assets/scss/style.scss', lang: 'scss' },
  ],

Node Sass を Dart Sass に変更する方法についてはこちら

☕コーヒーをおごる

コーディングやWeb関連技術の記事と、買い物など日々のメモから成り立っています。 →少しだけ詳しく