こんにちはー！
Webpack、知っていますか。
require() などでできた、ファイルの依存関係を、簡単にしてくれます！
Browserify に似ていますが、Webpack はスタイルシート、JSON、画像なども一緒にできます！
CSSを読む
というわけで、スタイルシートをロードしましょう！
うまくいかない場合は、このリポジトリを見てください。
まず、フォルダー内で、次のコマンドを打ってください。
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 も入れる。
