私は反応するアプリケーションを作っています。そのため、ファイル構造にはコンポーネントごとにフォルダがあるコンポーネントフォルダがあります。各コンポーネントフォルダには、ComponentName.jsとComponentName.scssファイルが含まれています。 index.htmlの先頭に<link rel="stylesheet" href="main.css" />を追加するだけで、ウェブパックを設定するにはどうすればよいですか？webpack：すべてのscssファイルを1つのmain.cssファイルにどのようにバンドルするのですか？
Webpackの設定でExtractTextPluginを使用していますが、CSSファイルを必要としないため、使用する必要があるかどうかはわかりません。私もscssローダーを探していますが、Sassローダーしか見つからないので、それを使用するはずですか？
HTML Webpack Pluginでこの作業を行うことができます。これは、入力テンプレートのようにindex.htmlを取り込み、自動的にスクリプトとリンクタグを挿入することができます。だからあなたのmain.cssとあなたのjsバンドルをhtmlページに挿入することができます。これは、ExtractTextPluginでうまくいきます。
は、私は、以下の設定と同じような何かを持っている：
マイローダー：
module: {
loaders: [{
test: /critical\.scss$/,
loader: ExtractTextPlugin.extract(['css', 'postcss', 'sass'])
}]
}
私のプラグイン：私はあなたのコード内SCSSファイルを必要とするこのアプローチで
plugins: [
new ExtractTextPlugin('css/critical.css'),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
、あなたのアプリコンポーネントでそれをやるだけで、あなたのscssファイルに他のscssファイルを読み込ませることができます。ポストローダーとcssローダーを組み合わせたsass-loaderを使用しています。ポストローダーを使うので、オートプレフィクサーを使うことができます。カスタムプラグインを使用してCSSを頭にインライン化し、折りたたみコンテンツの下にスタイルタグを追加する以外は、Esriベースのアプリケーションの場合と同様の処理を行うプロジェクトがあります。ここにそれを見つけることができますhttps://github.com/Robert-W/esri-redux。
注：私はまだ自分自身でwebpackを学習していますので、これは最適な設定ではないかもしれませんが、うまく動作します。
すべてのcssファイルをコンパイルしてindex.cssファイルにバンドルするwebpack-text-extract-plugginを使用できます。
scssをコンパイルするには、sass-loaderもインストールする必要があります。 WebPACKのコンフィグで
： のindex.htmlでvar ExtractTextPlugin = require('extract-text-webpack-plugin');
config = {
...,
plugins: [
...,
new ExtractTextPlugin('index.css')
],
module: {
loaders: [
...
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style','css')
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css!sass')
}
]
}
}
：
<link rel="stylesheet" type="text/css" href="/index.css">
のWebPACKを通じて取得する任意のJavascriptのファイルで：
require("./styles/my-custom-file.scss");