Help us understand the problem. What is going on with this article?

CakePHP4にSassを導入する

やりたこと

CakePHP4プロジェクトにSass(node-sass)を導入する。

環境(今回の作業に関連ないものも記載)

  • PHP7.4
  • cakephp4.1.2
  • node14.6.0
  • npm6.14.8
  • yarn1.22.4
  • node-sass4.14.1

方法

以下の二つの方法を検討したが、SassとCakeは分離しておいた方が、どちらかを変更する際に便利かなと思ったので、今回は後者で実施した。

  • cakephp3-elixirを利用する
    2020/8/31現在cakephp4-elixirというものがないのも、利用を敬遠した理由でもある。
    参考

  • yarnを利用する
    今回はこちらで行う。

手順

nodeインストール

省略。
nodeenvとかnodebrewを使うと便利。

npmインストール

省略

yarnインストール

省略

app配下をyarnプロジェクトにする

app直下で以下をyarn initを実行。
nameとprivate以外はデフォルト値。

yarn init
yarn init v1.22.4
question name (app): アプリケーション名
question version (1.0.0): 
question description: 
question entry point (index.js): 
question repository url: 
question author: 
question license (MIT): 
question private: yes
success Saved package.json
✨  Done in 26.98s.

これで、app直下にpackage.json,package-lock.json,node_modulesができる。

node-sassインストール

app直下でyarn add --dev node-sass
packageに以下が追加される。

package.json
  "devDependencies": {
    "node-sass": "^4.14.1"
  },

ちなみにsassにもsassnode-sassがあるようで、どちらでも動作はしたが早いらしいのでnode-sassとした。
https://qiita.com/190131start/items/ad5a3fcf70afe8ab6d5c

sassディレクトリ整備

app直下で以下のコマンドを実行する。

mkdir -p resources/scss/base
mkdir -p resources/scss/modules
mkdir -p resources/scss/partials
touch resources/scss/style.scss

ディレクトリ構成は以下を参考にさせていただいた。
https://tsudoi.org/guide/detail/8.html

動作確認用にSassファイル作成

動作確認用のため、中身は適当。

resources/scss/base/_normalize.sass
a {
  cursor: pointer;
  text-decoration: none;

  &:hover {
    color: inherit;
  }
}
resources/scss/style.scss
@import 'base/normalize';

package.jsonにビルドコマンド追加

package.json
  "scripts": {
    "build": "node-sass resources/scss/ -o webroot/css"
  },

ビルド実行

app直下でyarn build
webroot/css配下にstyle.cssができていれば成功。

この次にやりたいこと

nodemonで自動でビルドさせたい。

参照

ありがとうございます。
https://uxmilk.jp/38084
https://tsudoi.org/guide/detail/8.html
https://qiita.com/FumiyaShibusawa/items/9fab0dacaa99920a8611
https://qiita.com/acc1io/items/2d0d0c3adc98e254571f

learn_tech1
自分用の技術メモアカウント。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした