lessをgulpじゃなくてwebpackでコンパイルしつつ、minimizeしたりautoprefixerつけたり的なお話

cssをそのまま書くのもいいけど、色を頻繁に変えたいとかそういうことってよくあるわけで。
そういうときには大体LESSかSCSSを使うことが多いわけで。
これらをビルドするには大体gulpとかになってしまうんだけど、
Reactを使うとなるとwebpackになるからそれに合わせてビルドしたいというのが本音。

ということで今日はwebpackでlessをコンパイルするには的なお話をば。

https://github.com/watanabeyu/css-less-webpack
とりあえずこんな感じのリポジトリを作ってみた的な。
ダウンロードしてnpm installからのnpm buildでstyles.cssが出てくる的な。

const path = require('path')
const webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = [
  /* style settings */
  {
    entry: "./styles.less",
    output: {
      path: path.join(__dirname, 'dist'),
      filename: "styles.css",
      publicPath: '/'
    },
    module: {
      loaders: [
        {
          test: /\.less$/,
          loader: ExtractTextPlugin.extract({
            use: [
              {
                loader: "css-loader",
                options: {
                  minimize: true
                }
              },
              {
                loader: "postcss-loader"
              },
              {
                loader: "less-loader"
              }
            ],
            fallback: 'style-loader'
          })
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin('styles.css')
    ]
  }
]

ちなみにless-loaderの前にpostcss-loaderを使う形じゃないとautoprefixerが有効にならないので要注意的な。

自分はspectre.cssをCSSフレームワークとして使っているんだけど、
それらの変数をstyles.lessの中で上書きしたり、mycssで自分のcssを定義してみたり。

ってな感じでlessをwebpackでコンパイルできるよ的なみたいな。