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

TOC

  1. CSSを読む
  • Lessを読む
    1. まとめ
  • こんにちはー!

    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は、次のように書いてください。

    1
    2
    3
    4
    require("./style.css"); // cssを読み込む

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

    style.css

    1
    2
    3
    body {
    background-color: skyblue;
    }

    webpack.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    module.exports = {
    entry: './main.js',
    output: {
    filename: 'bundle.js'
    },
    module: {
    loaders: [
    { test: /\.css$/, loader: 'style!css' }
    ]
    }
    };

    index.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!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を実行!

    1
    2
    3
    4
    5
    6
    7
    $ 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

    1
    2
    3
    4
    @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 を実行!

    1
    $ webpack

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

    まとめ

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