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フロントエンドエンジニアを必要としています。


パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


投稿者 横田 東母子

運用やアクセシビリティに配慮したHTML/CSSの設計やコンポーネント作成、スタイルガイドの構築、コードレビュー、組み込み、要件の整理、社内進行管理、顧客とのコミュニケーションまで、ジョインしたチームが前に進むためにあれこれ担当しています。子育てと仕事のバランスを楽しめるよう、日々模索しています。