Shopify で実際に設定した CSS の環境構築
こんにちは、 Gaji-Labo 横田です。
今回は、Eコマース用のプラットフォームである Shopify によるサイト構築で、チーム開発にも必要となる、実際に設定した CSS の環境構築を簡単に紹介します。
Shopify については石垣の書いた以下記事も合わせてご参照ください。
テーマは Debut を使用
Shopify のデフォルトテーマである Debut を元に、UIの見た目をカスタマイズしていく想定です。Debut の theme.css には元々、実際には使用しないであろうスタイルも多く書かれているため、いったんまっさらな状態にして、サイトに必要なスタイルだけを復帰させたり、独自に CSS を書いていきます。
SCSS コンパイル用の Gulp 設定追加
theme.css の一番上に 「You cannot use native CSS/Sass @imports in this file without a build script」 とコメントがあり Sass の @import が使用できないため、SCSS のコンパイル用に Gulp を導入しました。
const gulp = require('gulp');
const plugins = require('gulp-load-plugins')();
const discardComments = require('postcss-discard-comments');
const autoprefixer = require('autoprefixer');
const cssdeclsort = require('css-declaration-sorter');
const mqpacker = require('css-mqpacker');
const paths = {
srcSass: 'styles/**/*.scss',
destCss: 'assets/',
};
function sass() {
return gulp
.src(paths.srcSass, { sourcemaps: true })
.pipe(
plugins.plumber({
errorHandler: plugins.notify.onError('Error: <%= error.message %>'),
})
)
.pipe(plugins.sassGlob())
.pipe(plugins.sass({ outputStyle: 'compact' }))
.pipe(
plugins.postcss([
discardComments(),
cssdeclsort({ order: 'alphabetical' }),
mqpacker(),
autoprefixer(),
])
)
.pipe(plugins.rename({extname: '.css.liquid'}))
.pipe(gulp.dest(paths.destCss, { sourcemaps: '.' }));
}
.
.
.
ざっとこんな感じですが、Shopify では .css.liquid 拡張子しか読みこまないので、該当箇所の拡張子のリネームに注意です。
stylelint 追加
チームでの開発に Stylelint は必須です。こちらも導入しました。
{
"extends": [
"stylelint-config-standard",
"stylelint-config-property-sort-order-smacss"
],
"plugins": [
"stylelint-prettier"
],
"rules": {
"prettier/prettier": [
true,
{
"tabWidth": 2,
"trailingComma": "none",
"singleQuote": false,
"quoteProps": "preserve"
}
],
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": [
"at-root",
"mixin",
"include",
"content",
"function",
"for",
"each",
"if",
"return",
"else",
"use",
"forward"
]
}
],
"block-no-empty": null,
"declaration-colon-newline-after": null,
"declaration-block-trailing-semicolon": null,
"length-zero-no-unit": [
true,
{
"ignore": ["custom-properties"]
}
],
"max-empty-lines": 1,
"no-descending-specificity": null,
"no-empty-source": null,
"number-leading-zero": "always",
"string-quotes": "double",
"selector-pseudo-class-no-unknown": [
true,
{
"ignorePseudoClasses": ["global", "local"]
}
],
"value-list-comma-newline-after": null
}
}
normalize.css 追加
CSS リセットですが、Debut テーマの theme.scss に入っている normalize.css はバージョンが v3.0.2 と古いため、最新版を採用します。
ディレクトリ構成
デフォルトの assets/ 内にサブフォルダを作成するとエラーで deploy できないため、ルートに並列して styles/ フォルダを作成し、 実装用ファイルを格納することにしました。
/
└ styles/ => scss 格納用ディレクトリ
└components/ => コンポーネント（セクション）用スタイル
└ layout/ => ヘッダー・フッター用スタイル
└ settings/ => 変数/normalize など
└ assets/ => theme.css.liquid が出力されるディレクトリ
Theme Kit でいうところの「セクション」を「コンポーネント」としています。
サイトの性質上、機能とスタイリングが密接であり、管理画面からもセクション単位で編集するため、ページごとに独自のスタイルを作るというよりは、各機能のコンポーネント（セクション）ごとにスタイリングする方針で実装を進めていきます。
まとめ
これで最低限、Shopify でのチーム開発でCSSを書く環境が整いました。
Shopify で CSS の環境を作成する時の参考になればと思います。
Gaji-Laboでは、HTML/CSSコンポーネント設計経験が豊富なパートナーさんを募集しています
現在、Gaji-Laboの開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。現在は特に正しいHTMLマークアップやCSS設計の業務経験が豊富なWebフロントエンドエンジニアを必要としています。
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください！
お問い合わせしてみる！
