Postcss with Webpack

Question

postcssで動作するWebpackファイルを取得しようとしていますが、成功しません。

私はこれはWebPACKのコンフィグあるDIST/cssのフォルダ

で生成されたファイルを.cssの取得するために探しています

のsrc/cssのフォルダに.pcss拡張子を持つ私のpostcssファイルを命名しています私は今のところ持っている。

var path = require('path'); 
var rootPath = path.join(__dirname, './'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: { 
     'main':'./src/js/index.js' 
    }, 
    output: { 
     path: path.join(rootPath, 'dist'), 
     filename: '[name].js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel' 
      } 
     ], 
     rules: [ 
      { 
       test: /\.pcss$/, 
       exclude: /node_modules/, 
       use: [ 
       { 
        loader: 'postcss-loader' 
       } 
       ] 
      }, 
       { 
        test: /\.css$/, 
        exclude: /node_modules/, 
        use: [ 
         { 
          loader: 'style-loader', 
         }, 
         { 
          loader: 'css-loader', 
          options: { 
           importLoaders: 1, 
          } 
         } 
        ] 
       } 
      ] 
    }, 
    watch: true 
}; 

マイpostcss.configファイル

module.exports = { 
    plugins: [ 
     require('precss'), 
     require('autoprefixer'), 
     require('postcss-simple-vars') 
    ] 
} 

私は私が間違っているのかを知ることはできますか？

Answer 1

extractTextPluginを使用してこれを解決しました。以下のコード。

var path = require('path'); 
var rootPath = path.join(__dirname, './'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const extractPCSS = new ExtractTextPlugin('../css/[name].css'); 

module.exports = { 
    entry: { 
     'main':'./src/js/index.js' 
    }, 
    output: { 
     path: path.join(rootPath, 'dist','js'), 
     filename: '[name].js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel' 
      } 
     ], 
     rules: [ 
      { 
       test: /\.pcss$/, 
       exclude: /node_modules/, 
       use: extractPCSS.extract([ 'css-loader', 'postcss-loader' ]) 
      } 
      ] 
    }, 
    plugins: [ 
    extractPCSS 
    ], 
    watch: true 
};