Webpackとスタイラスを使用して静的CSSを作成する

Question

Webpackを初めて使用する。私は自分のアプリケーションのJS部分をそれに移行することを考えていました。しかし、私はCSSを扱う方法が嫌いです。それを簡単にして、自分でリンクしたいと思います。不幸にも、ドキュメンテーションはあまり役立たず、検索結果と同じでした。

私は正確に何が必要ですか？

1. 多くの.stylファイルから静的.cssへのスタイラスのコンパイル。
2. 静的スタイルシートファイル（エントリポイント？）は3つありますが、アプリケーションのJS部分のエントリポイントとはまったく異なります。
3. また、ソース.stylファイルの1つが変更されたときにcssをコンパイルする「時計」機能もあります。

正しい方向に私を指すことができる誰かが、設定を書くかもしれませんか？これはウェブパックでも可能ですか、グランと一緒にいなければなりませんか？

ありがとうございました。

Answer 1

Webpackの詳細については、このオンラインブックSurviveJS - Webpackを参照してください。これは、Webpackに関連するほとんどの概念を説明します。 require('./style.styl');

を忘れないでください

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

module.exports = { 
    entry: './entry.js', // you application entry point 
    output: { 
     filename: 'bundle.js', // resulting bundle file 
     path: './public' // the output folder path 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.styl$/, 
       loader: ExtractTextPlugin.extract("style", "!css!stylus") // plugin used to extract css file from your compiled `styl` files 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('style.css') // output css bundle 
    ] 
}; 

は次に、あなたにあなたのスタイラスファイルを必要とentry.jsファイル： はあなたがあなたのプロジェクトのルートにwebpack.config.jsを作成することで起動することができます必要なものを達成するために、それはこのようにすることができます

npm install --save-dev css-loader sass-loader style-loader extract-text-webpack-plugin