I am mitsuruog | webpackでSalesforce Lightning Design Systemを使う

一手間必要だったのでメモ。
長いので Salesforce Lightning Design System(以下、SLDS)とします。

元ネタ

こちらの内容とほぼ一緒です。

Webpack config example · Issue #127 · salesforce-ux/design-system
https://github.com/salesforce-ux/design-system/issues/127

手順

webpack をあまり触り慣れてない人向けのメモ。

SLDS を npm install する

npm install --save @salesforce-ux/design-system

index.scss の追加

SLDS は sass で作られているので、index.scssで SLDS の本体を@importするようにします。
これを webpack で処理して、style.cssとして出力していきます。

@import "~@salesforce-ux/design-system/scss/index.scss";

webpack.config.js の設定

webpack で css を扱うためにいくつか loader が必要です。まだの場合はインストールしておいてください。

# 各種ローダー
npm install --save-dev file-loader style-loader css-loader sass-loader
# 途中sassをコンパイルするために
npm install --save-dev node-sass
# webpackで処理したcssをファイル出力するために
npm install --save-dev extract-text-webpack-plugin

webpack.config.jsにてscssを処理するようにします。

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js",
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          "style-loader",
          "css-loader!sass-loader"
        ),
      },
    ],
  },
  plugins: [new ExtractTextPlugin("style.css")],
};

これで、SLDS がstyle.cssに含まれるようになります。

アプリケーションへの組み込み

アプリケーションへの組み込みは webpack のエントリポイント(この例だとentry.js)で、index.scssを呼び出すと OK です。

// entry.js
require("./index.scss");
console.log("Hello Salesforce Lightning Design System!!");

最後にindex.htmlで webpack で出力されたstyle.cssを利用すれば OK。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <script src="./bundle.js"></script>
  </body>
</html>

font ファイルのロード(追記:2015/01/03)

上の方法では SLDS の font が正しくロードできず、font ファイルのリクエストがすべて 404 エラーになっていました。

まず、webpack.config.jsのmodule.loadersに file-loader を追加して、font ファイルをコピーするようにします。

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js",
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          "style-loader",
          "css-loader!sass-loader"
        ),
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: "file-loader?&name=/assets/fonts/[name].[ext]",
      },
    ],
  },
  plugins: [new ExtractTextPlugin("style.css")],
};

これで、/assets/font以下に font ファイルがコピーされるようになりましたが、
SLDS 内部の font 指定が絶対パス指定されているため、このままでは font が webpack で処理されません。

index.scssにて SLDS 内部の Sass 変数を書き換えて、webpack で処理できるようにします。

// SLDS内部で使われているfontのpath設定
$static-font-path: "~@salesforce-ux/design-system/assets/fonts/webfonts";

@import "~@salesforce-ux/design-system/scss/index.scss";

font の絶対パスの件は本家に似たような Issue がありますので、Sass 変数の置き換え作法は、今後のためにも知っておいた方がよろしいかと思います。

Compiling index-ltng.scss results in CSS that does not load salesforce fonts · Issue #71 · salesforce-ux/design-system https://github.com/salesforce-ux/design-system/issues/71

これで font も読み込むことができました。
めでたし、めでたし。

まとめ

あくまで最小構成です。
React.js を触っていると webpack を使うことが多いのですが、ちょっとしたサンプルであればbowerかCDNの方が楽ですね。