Nuxt.jsでのSCSS使用手順

2019年12月31日カテゴリー：Web系, 技術系コメント : 0

０，目次

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

１，はじめに

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

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

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

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

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

２，Nuxt.jsでのSCSS使用手順

（１）モジュールの導入

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

（２）SCSSファイルの配置

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

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

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

（３）nuxt.config.jsの編集

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

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

編集対象：nuxt.config.js

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

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

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

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

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

（４）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がそのまま読み込まれ実行されます。

３，感想

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

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

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

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

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

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

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

npmコマンドの発行ミスと、package.jsonファイルの設定ミスが原因だった。Web系の技術訳わからん・・・ / Nuxt.jsの「Error: No build files found in XXX」への対応 https://t.co/gOKByalBxF #sysrigar @jskny_twさんから
— Jskny (@jskny_tw) December 31, 2019

悪戦苦闘しました

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

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

４，参考文献

Tag : html, javascript, Nuxt.js, Vue.js, web 作成者 : jskny

Sysrigar