LoginSignup
2

More than 3 years have passed since last update.

CakePHP4にSassを導入する

Last updated at Posted at 2020-08-31

やりたこと

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2