こんにちは、まちいろの門田です。

前回に引き続き、Nuxt+TypeScript+Sassの開発環境構築のメモノートの続きとなります。
今回はNuxt+Typescriptで動作したプロジェクトにSassの環境を追加してあげる、というだけの内容となります。
併せて社内で、というよりも自分が今後使う予定のCSS設計の構築も併せて記載しようかと思います。

まずはSassの導入を行います。
nuxt同様、yarn経由でササッと入れてしまいます。

$ yarn add node-sass node-sass-import -d

実行して成功すれば、package.jsonにインストールした２つの項目が追加されているはずです。

{
 "name": "sample",
 "version": "1.0.0",
 "description": "none",
 "author": "s_kadota",
 "private": true,
 "scripts": {
   "dev": "nuxt",
   "build": "nuxt build",
   "start": "nuxt start",
   "generate": "nuxt generate",
   "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
   "precommit": "npm run lint"
 },
 "dependencies": {
   "@nuxtjs/axios": "^5.3.6",
   "@nuxtjs/pwa": "^2.6.0",
   "cross-env": "^5.2.0",
   "node-sass": "^4.11.0",　　　　　　　　　　　←　ここ
   "node-sass-import": "^2.0.1",　　　　　　　 ←　ここ
   "nuxt": "^2.3.4",
   "nuxt-property-decorator": "^1.3.1",
   "nuxt-ts": "^2.4.2",
   "vue-property-decorator": "^7.3.0"
 },
 "devDependencies": {
   "@nuxtjs/eslint-config": "^0.0.1",
   "babel-eslint": "^8.2.1",
   "eslint": "^5.0.1",
   "eslint-config-prettier": "^3.1.0",
   "eslint-config-standard": ">=12.0.0",
   "eslint-loader": "^2.0.0",
   "eslint-plugin-import": ">=2.14.0",
   "eslint-plugin-jest": ">=21.24.1",
   "eslint-plugin-node": ">=7.0.1",
   "eslint-plugin-prettier": "2.6.2",
   "eslint-plugin-promise": ">=4.0.1",
   "eslint-plugin-standard": ">=4.0.0",
   "eslint-plugin-vue": "^5.0.0",
   "nodemon": "^1.18.9",
   "prettier": "1.14.3"
 }
}

次にCSSを自動監視してビルドしてもらうためのscriptsを記載します。

"実行名"："処理内容"

という形で記載しますので、scriptsに新しく

"build-css" : "node-sass --watch --include-path ./assets/scss --output-style compressed ./assets/scss/style.scss ./assets/css/style.cs"

という形で記載します。

「--watch」でファイル変更による自動ビルドを行うようにし、
「--include-path」で監視先のディレクトリを記載します。
「--output-style」でビルド後のcssの形式を指定します。「compressed」は改行もスペースもすべて無しの圧縮形式です。
次いでビルド元のファイルを指定し、ビルドにより生成するcssの出力ファイルを指定します。
これでビルド環境に関してはほぼ完了です。

次にassetsディレクトリ内に上記で指定したようなcssを配置します。

※[]はディレクトリ

[assets] ┬ [css] ─ style.css
         │
         └ [scss] ┬ style.scss
                  │
                  ├ [base] ┬ reset.scss
                  │        └ base.scss
                  │
                  ├ [layout] ┬ header.scss
                  │          └ footer.scss
                  │
                  └ [object] ┬ [commponet] ┬ button.scss
                             │             └ form.scss
                             │     
                             ├ [page] ┬ menu.scss
                             │        └ mypage.scss
                             │ 
                             └ [utility]  ┬ margin.scss
                                          └ padding.scss 

各ディレクトリに置いてあるscssは仮でこういうの置きますよという目安です。CSS設計技法は世の中調べれば10を超える種類があり色々さわり参考にして最終的には自分が開発する上でやりやすいような上記の様な形に落ち着きました。構造はFLOCSSを参考にしてます。

CSSディレクトリ

ページ側に読み込ませるstyle.cssの置き場所。基本的に外部のcssや、css側で変数（カスタムプロパティ）を定義する様な仕様でなければstyle.cssのみが置かれる。

SCSSディレクトリ

実際にスタイルを定義する箇所。
style.scssにディレクトリ内のすべてのscssをimportし、最終的にstyle.cssにビルドします。

baseディレクトリ
リセットCSSやサイトの基本構造などを管理する。
プロジェクトスタート時以外は基本的に編集をしない想定。

layoutディレクトリ
headerやfooterなどのページレイアウトを管理する。

objetcディレクトリ
- componentディレクトリ
ボタンやフォームなど、再利用可能なもののスタイルを管理する。

- pageディレクトリ
特定のページ固有のスタイルを定義する。
Projectという名前が一般的だが、nuxtで使用する上でcomponentやpageなどある程度呼称を一本化したいのと、pageがわかりやすいのでpageという名前。

-utilityディレクトリ
「margin-top: 10px !important」など一つのスタイルのみを定義しておき適宜使用する便利ツール群のようなもの。

上記の5つのディレクトリでの運用を基本にしてます。
ゆるすぎれば後々の管理が難しくなり、硬すぎると開発時に時間がかかってしまうためCSS設計は試行錯誤ですが今はこの様な形で行っています。

これらのscssファイルをstyle.scssへ読み込ませます。

@charset "utf-8";

//base
@import "./base/reset.scss";
@import "./base/base.scss";

//layout
@import "./layout/header.scss";
@import "./layout/footer.scss";

//object

//  component
@import "./object/component/button.scss";
@import "./object/component/form.scss";

//  page
@import "./object/page/item.scss";
@import "./object/page/cart.scss";

//  utility
@import "./object/utility/margin.scss";
@import "./object/utility/padding.scss";

こんな感じです。

こうすれば、ここに記載されたファイルに少しでも変更があった場合に自動的にstyle.cssが最新の状態にビルドされるようになります。

それでは試しに

$ yarn run build-css

を実行します。
開始されましたら下記の様なログが出力され、

yarn run v1.12.3
$ node-sass --watch --include-path ./assets/scss --output-style compressed ./assets/scss/style.scss ./assets/css/style.css

あとはどのファイルでもいいので編集＋保存を行います。
base.scssとmargin.scssに下記のようなスタイルを定義してみます。

//base.scss

body {
  width: 100%;
  height: 100vh;
}

//margin.scss

.mt_5 {
  margin-top: 5px;
}
.mt_10 {
  margin-top: 10px;
}

するとstyle.cssが作成され、下記のように上記の２ファイルで定義したスタイルが圧縮された形で記載されているかと思います。そうすれば成功です。

body{width:100%;height:100vh}.mt_5{margin-top:5px}.mt_10{margin-top:10px}

このくらいの初歩的なこと言われなくても分かる、という内容かもしれませんが割と新しいプロジェクトスタートの際に細かいところをど忘れして変に時間を食ってしまったりするので備忘録は大事。

あとはnuxt.config.jsのcssの箇所にstyle.cssを指定してあげます。

//nuxt.config.js

css: ['~/assets/css/style.css'],

こうすればnuxtで開発するpageにスタイルが適用されます。
これでcssを書く準備が完了しました。

次はTypescriptとsassで何かしらページをいじっていきます。