Magento2ではスタイルシートはLESSで記述する前提のようです。
LESSが分かれば断然その記述で書くことが効率的なのはわかりますが、今のところ学習コストの方がかかりそうなので、CSSファイルを読み込むことにします。
まずはMagento2 themeの作成でテーマを作成しておきます。
CSSファイル設定 †
以下のパスに default_head_blocks.xml を設置します。
app/design/frontend/Yassujp/blank/Magento_Theme/layout/
default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/custom.css"/>
</head>
</page>
CSSの記述 †
以下のパスに custom.css を設置します。
app/design/frontend/Yassujp/blank/web/css/
custom.css
body {
color: pink;
}
静的ファイルのデプロイ †
以下のコマンドで静的ファイルをデプロイします。
php bin/magento setup:static-content:deploy
デプロイ先は以下になります。
pub/static/frontend/Yassujp/blank/en_US/css/custom.css
更新されない場合は削除してしまって再度コマンドを叩きました。
# rm -fr pub/static/frontend/Yassujp/
キャッシュファイルのクリア †
SYSTEM - Cache Management からキャッシュをクリアします。
これで公開画面の文字がピンク色になっていればOKです。
