Webpackで、CSS、Lessをロードする

こんにちはー!

Webpack、知っていますか。
require() などでできた、ファイルの依存関係を、簡単にしてくれます!
Browserify に似ていますが、Webpack はスタイルシート、JSON、画像なども一緒にできます!

CSSを読む

というわけで、スタイルシートをロードしましょう!
うまくいかない場合は、このリポジトリを見てください。

shundroid/webpack-stylesheet-example
Contribute to webpack-stylesheet-example development by creating an account on GitHub.

まず、フォルダー内で、次のコマンドを打ってください。

npm i --save-dev webpack

次に、css を読む、loaderを追加します。
その時、css-loader のほかに、style-loader を入れます!ここでハマった・・

npm i --save-dev style-loader css-loader

ファイルの構成は、次のようになります。

  • main.js
  • style.css
  • webpack.config.js
  • index.html

main.jsは、次のように書いてください。

require("./style.css"); // cssを読み込む

// alertとかをしておくと、読み込まれているかがわかりやすい
// alert("hello");

style.css

body {
  background-color: skyblue;
}

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style!css' }
    ]
  }
};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="bundle.js"></script>
</head>
<body>
</body>
</html>

この状態で、Webpackを実行!

$ webpack
Hash: XXX
Version: webpack 2.0.6-beta
Time: 1009ms
    Asset   Size  Chunks             Chunk Names
bundle.js  12 kB       0  [emitted]  main
    + 6 hidden modules

bundle.jsが生成されます。

index.htmlを開くと、水色のページが表示されます。

Lessを読む

less-loaderを使用します。less もいります。

npm i --save-dev less-loader less

先ほどの style.css を、style.less に変更してください。

style.less

@color: orange;
body {
  background-color: @color;
}

Lessが動いているか確かめるので、変数を使いました。

main.jsを編集します。

// require("./style.css"); となっていたところを
require("./style.less"); // にする。

webpack.config.js も編集します。

// { test: /\.css$/, loader: 'style!css' } となっていたところを、
{ test: /\.less$/, loader: 'style!css!less' } // にする。

webpack を実行!

webpack

index.html を開くと、ページがオレンジ色になります。

まとめ

  • css-loader、less-loader を使うと、スタイルをスクリプトに変換して、js、typescipt などと合体できる!
  • css-loader を入れるときは、style-loader も入れる。
  • less-loader を入れるときは、style-loader、less も入れる。