やりたこと
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に以下が追加される。
"devDependencies": {
"node-sass": "^4.14.1"
},
ちなみにsassにもsass
やnode-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ファイル作成
動作確認用のため、中身は適当。
a {
cursor: pointer;
text-decoration: none;
&:hover {
color: inherit;
}
}
@import 'base/normalize';
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