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

2016-01-31

TOC

CSSを読む

Lessを読む

まとめ

こんにちはー！

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

CSSを読む

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

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

1	$ npm i --save-dev webpack

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

1	$ 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

1
2
3

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 もいります。

1	$ npm i --save-dev less-loader less

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

style.less

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

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

main.jsを編集します。

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

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

1 2	// { 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 も入れる。

*.*

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

CSSを読む

Lessを読む

まとめ

.