2017-05-21 24 views
0

すべての.scssファイルを1つのCSSファイルにコンパイルするWebpackスクリプトを作成しました。私がgulp/gruntの代わりにwebpackを選んだのは、すべてのコンパイルが完了した単一の設定ファイルを持つほうが簡単だと思ったからです。Webpack2は、CSSの代わりにsass/scssをjsにコンパイルします

私が直面している問題は、scssファイルがjavascriptコードにコンパイルされていることです。これはwebpackがデフォルトで行うことですか?

どのようにしてCSSにするのですか?

コード:

module.exports = { 
    entry: glob.sync('./src/components/**/*.scss') , 
    output: { 
     path: path.resolve(__dirname, 'public', 'css'), 
     filename: 'styles.css' 
    }, 
    module: { 
         loaders: [ 
      { 
      test: /\.scss$/, 
      loaders: ['style-loader', 'css-loader', 'sass-loader'] 

      } 
     ] 
    } 
}; 
+2

をエクスポートするには、トップ

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

書き換えローダーでは、あなたのコンフィグ

にいくつかの行を追加する必要がありますテキストWebpackプラグインを抽出する:https://github.com/webpack-contrib/extract-text-webpack-plugin。デフォルトでは、Webpackはあなたのcssをファイルに挿入しますが、これを使用すると、好きなようにcssファイルが生成されます。エントリjsファイルにmaster sassファイルを必要とする必要があります。 – mmmoustache

答えて

2

あなたはextract-text-webpack-pluginを使用する必要があります。プラグインをインストールした後、あなたはあなたが使用する必要が

{ 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader", "sass-loader") 
    } 

プラグインフィールドを追加します

module.exports = { 
    ..... 
    plugins: [ 
     new ExtractTextPlugin({filename: 'styles.css'}) 
    ] 
    ... 
} 
関連する問題