すべてのsassファイルをwebpackにバンドルするにはどうすればいいですか？

Question

私はwebpackを使用して私のes6アプリケーションを構築しています。残念ながら、すべてのSASSファイルを1つのファイルにまとめて、メインのHTMLページからインポートする方法を見つけることはできません。以下のローダーを使用して

require("./../scss/main.scss") 

：現時点では

は、私は私のJavaScriptの見解では、このようなSASSをコンパイル

{ 
    test: /\.scss$/, 
    loaders: ["style", "css", "sass"] 
} 

しかし、これは私が欲しいものではありません。私はファイルmain.scssのエントリを持っていて、プロジェクトのどこかにダンプさせたいと思います。index.htmlファイルがあり、そこからインポートできるpublicというフォルダがあります。

誰でも？

Answer 1

これを行うには、extract-text-htmlプラグインを使用する必要があります。あなたがExtractTextPluginを使用すると、それはSASSからCSSを配置します ：私はお勧めローダとプラグインの

var webpack = require('webpack'), 


ExtractTextPlugin = require("extract-text-webpack-plugin"), 
    HtmlWebpackPlugin = require('html-webpack-plugin'), 
    path = require('path'), 
    srcPath = path.join(__dirname, 'src'), 
    sassLoaders = [ 
    "css-loader", 
    "autoprefixer-loader?browsers=last 2 version", 
    "sass-loader?indentedSyntax=sass&includePaths[]=" + path.resolve(__dirname, "./src"), 
    ]; 

：

module: { 
    loaders: [ 
     {test: /\.scss$/, loaders: ["style", "css", "sass"]}, 
     {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}, 
     {test : /\.woff|\.woff2|\.svg|.eot|\.ttf|\.png/, loader : 'url?prefix=font/&limit=10000&name=/assets/fonts/[name].[ext]' 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("main.css"), 
    new webpack.NoErrorsPlugin(), 
    ] 

はEDITあなたwebpack.config.jsで は、これを設定します出力フォルダにすべてバンドルされたファイル。私はあなたがすべてのあなたを構築することができますので、自動的にhtmlとCommonsChunkPluginにCSSやJSを注入することもHtmlWebpackPluginをチェックお勧めしますnew ExtractTextPlugin("main.css")

出力

output: { 
    path: path.resolve(__dirname, "./public"), 
    }, 

：あなたのようなプラグインに名前を配置することができます libsを分離されたjsに、そしてあなたのすべてのコードを別のものに入れておくと、デバッグ時にかなりの時間を節約できます。