DEVDEV

Nuxt.jsでscssを使用する方法

作成日
2020-11-03
更新日
2021-03-06

今回は、Nuxt.jsでscssを使用する方法を解説しています。 scssを使用すると、CSSを書く際に便利な機能がたくさん使えます。グローバルで読み込む方法も解説しています。

ライブラリをインストール

sass-loadernode-sassをdevDependenciesにインストールします。

bash
yarn add -D sass-loader node-sass

以上で、Nuxt.jsではscssが使えるようになります。

プロジェクトを立ち上げたままインストールするとnode-sassが読み込まれないようなので、Nuxt.jsを再起動してください。

Vueファイルでscssを書く

Vueファイルでscssを使用する場合は、lang="scss"をstyleタグに記載します。

html
<template> <div class="article"> <h2>テスト</h2> </div> </templatet> <script> export default {} </script> <style lang="scss"> h1 { ... } .article { ... } </style>

scssファイルをグローバルに読み込む

  • appilication.scss scssをまとめて読み読ませるファイル
  • variables.scss 変数を扱うscssファイル
  • common.scss 共通で使うscssを記載するファイル

上記の3つを例にして解説します。
appilication.scss

scss
@import "variables"; @import "common";

variables.scss

scss
$primary: #EE817B;

common.scss

scss
h1 { font-size: 30px; } .article { font-size: 22px; }

3つファイルがありますが、最終的にappilication.scss1つで吐き出すように設定します。

nuxt.config.jsの設定

グローバルにCSSを読み込ませるには、nuxt.config.jscssプロパティにscssファイルを指定します。

js
export default { css: ["@/assets/stylesheets/application.scss"], }

以上Nuxt.jsでscssを使用する方法でした。 scssの量が増えてくると1ファイルでは管理できなくなってくると思うので、管理しやすいディレクトリ構成を探してみてください!

Related