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に変更する方法についてはこちら
参考ページ
- 【Ch.2】プロジェクトを作成する【Nuxt de Portfolio】 | 株式会社LIG 「スタイルを追加する」の項