2020/02/07Zendeskのテーマ開発でSassとAutoprefixerを設定する手順Zendeskのテーマを作るときに開発環境でSassとAutoprefixerを設定する方法を紹介します。今回は個人的な備忘録になります。エディタの拡張機能でコンパイルしないZendeskで指定されているRubyのsasscを使うWatch機能としてRubyのfilewatcherを使うgulpでAutoprefixerを使う説明する環境は以下の通りです。v1.39.2この記事の目次Zendeskのテーマ開発でSassとAutoprefixerを設定する手順Sassに必要なgemをインストールするgulpのAutoprefixerを設定するおわりに...Zendeskのテーマ開発でSassとAutoprefixerを設定する手順gulpでAutoprefixerを使うのならSassも一緒に使いたいところだが、Zendeskのテーマ制作ではsasscが用意されているため、こちらを使う必要があった。sasscにはwatch機能がないので、filewatcherを使い、sassファイルに変更があったらコンパイルを実行するようにしている。style.cssに出力する前にAutoprefixerに通したかったが、Ruby上の設定がわからないためgulpで代用する。本来はSassのコンパイルとAutoprefixを同時に行いたいが、今回はsassとAutprefixの作業が別れているため2回コマンドが打つ必要がある。ローカルでZendeskテーマ制作ができる状態であることを前提に説明する。Zendeskのテーマ制作環境をローカルに作る4ステップ!2020.02.04また、gemのインストールとgulpの設定をする必要があります。わからなくなったら以下の記事を参照してください。SassやAutoprefixer、ejs、画像の圧縮などを自動化する2020.02.03Sassに必要なgemをインストールするBundlerを使って「saasc」と「filewatcher」をインストールします。Gemfileにこの2つを追記します。以下のコマンドで「saasc」と「filewatcher」をインストール。installSassのコンパイルをするだけなら以下のコマンドを打ちます。これだけだとsassファイルを更新するたびにコマンドを打つ必要があるので面倒です。binディレクトリのcompile.rbを起動Zendeskのテンプレートでは「styles」ディレクトリの中にsassファイルが保存されています。「styles」ディレクトリの中にあるscssの拡張子ファイルが更新されたら、compile.rbを実行させるにはfilewatcherを使います。'./bin/compile.rb'これでscssファイルを保存するだけで自動でコンパイルされます。gulpのAutoprefixerを設定するテーマの上のディレクトリにgulpを含む「node_modules」本体をインスールして、テーマの中にはgulpfile.jsとシンボリック化した「node_modules」を置きます。テーマの上のディレクトリにpackage.jsonを作成します。次にAutoprefixerに必要なパッケージをすべてインストールします。-Dシンボリック化した「node_modules」をテーマのディレクトリに作成します。「node_modules」本体までのパスは環境にあわせて書き換えてください。./node_modules先ほど作成したpackage.jsonにAutoprefixerの設定を書いておきます。オレンジの部分を追記してください。]}テーマのディレクトリに戻って、gulpfile.jsを作成。それから以下のように書きます。//gulpの初期処理あとは以下のコマンドでgulpを動かして、style.cssにベンダープレフィックスをつけます。syle.cssにベンダープレフィックスをつけるおわりに...今回はZendeskのテーマ開発でSassとAutoprefixerを設定する手順について説明しました。Autoprefixerの設定についてはgulpを使う方法以外にありそうですが、今回は確実な方法を紹介しておきます。以下は試してみたが、うまく行かなかった方法です。Compiler」でSassのコンパイルを試してみましたが、Zendeskの独自の変数があるためエラーになる。「Autoprefixer-rails」を試してみたが、今回のディレクトリ構造でうまくstyle.cssを出力方法が見つからなかった。