Nuxt.jsでSassを使う

Ad Area

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で読み込む。

style.scss

@charset "utf-8";

@import '_variables';
@import '_base';

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

nuxt.config.js

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

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

Ad Area