web-dev-qa-db-ja.com

Webpack sassはcssファイルです

私はこのようなsassローダーでWebパックを使用しています：

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: "style!css!sass"
      }
    ]
  }
};

しかし、スタイルがスタイルタグに適用されるのがわかります。cssファイルはどこにありますか？

javascriptnode.jssasswebpack
64
user4207046

デフォルトでは、スタイルローダーはコンパイル済みのcssをバンドルにインライン化します。これは、出力ファイル（たとえば、 bundle.js。 extract-text-webpack-plugin を使用すると、コンパイルされたcssをバンドルから削除し、別のファイルにエクスポートできます。

最初に-ローダーをプラグインでラップします：

 loaders: [{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract(
    "style",
    "css!sass")
 }]
},

次に、プラグインが生成するファイルを呼び出すものをプラグインに指示します。

plugins: [
    new ExtractTextPlugin("app.css")
 ]

通常、このファイルをHTMLに含めます。

88
adc

Webpackの使用時に別のCSSファイルが必要な場合は、 extract-text-webpack-plugin を使用する必要があります。

7
zkhan