webpack extract-text-webpack-pluginを使用して別のファイルにCSSを抽出します

Question

webpackを使用してすべて.cssを別のファイルに展開しようとしています。これを行うには、xtract-text-webpack-pluginを使用しています。

何らかの理由で、ウェブパックを実行した後にファイルが出力されていません。

は、ここでは、これが私のwwwrootフォルダ内の私は、コンソール

Hash: 81acf65502ca13764b09 
Version: webpack 3.2.0 
Time: 71ms 
    Asset  Size Chunks    Chunk Names 
main.js 2.62 kB  0 [emitted] main 
    [0] multi ./App/main.js 28 bytes {0} [built] 
    [1] ./App/main.js 27 bytes {0} [built] 

なし.cssファイルで入手出力され、私のwebpack.configファイル

var path = require('path'); 
var webpack = require('webpack'); 

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

const css = new ExtractTextPlugin('styles/[name].css'); 

module.exports = { 
    entry: [ 
     './App/main.js' 
    ], 
    output: { 
     path: path.join(__dirname, '/wwwroot/js/'), 
     filename: '[name].js', 
    }, 
    resolve: { 
     extensions: ['.css'] 
    }, 
    module: { 
     rules: [{ 
      test: /\.css$/, 
      use: ExtractTextPlugin.extract({ 
       use: 'css-loader' 
      }) 
     }] 
    }, 
    plugins: [ 
     css 
    ], 

} 

です。 これはなぜ起こっているのですか？

はここpackage.jsonファイル

ある

"dependencies": {}, 
    "devDependencies": { 
    "css-loader": "^0.28.4", 
    "extract-text-webpack-plugin": "^3.0.0", 
    "webpack": "^3.2.0" 
    } 

ありがとうございます！

Answer 1

私はこれを理解することができました。

ウェブパックの設定が正しい。

あなたが.scssを必要とすることができ、それはcssファイルのエントリポイントを提供します。この

第一の方法を行うための2つの方法があります。あなたのWebPACKに

entry: { 
     index: "./scripts/index.js", 
     vendor: "./styles/yourcss.css" 
    } 

Answer 2

これを行う方法はたくさんあります。ここに私がやっている方法があります....

module: { 
      rules: [ 
       { 
        test: /\.css$/, use: ExtractTextPlugin.extract(
         { use: isDevBuild ? 'css-loader' : 'css-loader?minimize' } 
        ) 
       } 
     }, 
     output: { path: path.join(__dirname, clientBundleOutputDir) }, 
     plugins: [ 
      new ExtractTextPlugin('site.css') 

私のすべてのこの構成のCSSは、1つのsite.cssファイルに展開されます。