Nuxt.jsでのSCSS使用手順

0,目次

  1. はじめに
  2. Nuxt.jsでのSCSS使用手順
    1. モジュールの導入
    2. SCSSファイルの配置
    3. nuxt.config.jsの編集
    4. Vueファイルにimportの記載
  3. 感想
  4. 参考文献

1,はじめに

Nuxt.jsではCSSだけでなく、SCSSも使えるという話を聞きました。

そこで、SCSSをNuxt.jsで使用できないか試したところ、

自動コンパイル的な感じで、SCSSファイルの直接読み込みができていました。

最近の技術の凄さに驚きです(日進月歩の世界だなと思いました)。

そこで、Nuxt.jsでSCSSを使用する手順を記載します。

2,Nuxt.jsでのSCSS使用手順

(1)モジュールの導入

Nuxt.jsでSCSSを使用するために、以下のモジュールを導入します。

  • node-sass
  • sass-loader
  • @nuxtjs/style-resources

インストールのために、以下のコマンドを実行しました。

npm install --save-dev node-sass
npm install --save-dev sass-loader
npm install --save-dev @nuxtjs/style-resources

(2)SCSSファイルの配置

Nuxt.jsではCSSなどの静的なファイルは「assets」ディレクトリに配置することが推奨されています。

assets ディレクトリには Stylus や SASS、 Image、 Font のようなコンパイルされていないファイルを入れます。

ディレクトリ構造 – NuxtJS

そこで、使用したいSCSSファイルをassetsフォルダに格納します。

(3)nuxt.config.jsの編集

導入したSCSSのモジュールを使用するように、

Nuxt.jsの設定ファイルを編集します。

編集対象:nuxt.config.js

追記箇所:module.exportsの設定内

追記内容:以下の内容を追記します。

modules: ['@nuxtjs/style-resources']

以下のような感じになっていればOKです。

module.exports = {
  // 場合によってはなんらかの設定など
  modules: ['@nuxtjs/style-resources']
  // 場合によってはなんらかの設定など
}

(4)Vueファイルにimportの記載

SCSSファイルを使用したいVueページのScriptタグ内に、

以下の内容を追記します。

// import css files.
import "~/assets/css/style.scss";

例えば、以下のようになります。

<template>
 <h1>Hello World !</h1>
</template>
<script>
// import css files.
import "~/assets/css/style.scss";
</script>

モジュールの導入や、設定ファイルの変更、

Vueのファイルの更新ができたら、

contrtl+cで一旦Nuxt.jsのサーバーを停止させ、

再度開始すると、SCSSがそのまま読み込まれ実行されます。

3,感想

どうでもいいことですが、

このサイト(sysrigar)のWordPressテーマの一部で、SCSSを使用しています。

この自作テーマを修正する際に、

SCSSを毎回コマンドラインから手動でSASSコマンドに渡しCSS化していました。

その手順が自動化されていることを思うと、

SCSSを読み込めるNuxt.jsというか、最新のWeb開発技術すごいです。

(まぁ、自作テーマ用のビルドスクリプトとか書いた方が良いのでしょうが・・・)

悪戦苦闘しました

とはいえ、Nuxt.jsは大量のプラグインとかモジュールが関連していて、

何がどうなっているのか、まだ未理解な部分が多いです。

4,参考文献

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA