與Webpack Postcss

Question

我想獲得一個webpack文件與postcss一起工作沒有成功。

我在SRC/css文件夾命名我的.pcss擴展postcss文件

我希望得到的.css在蒸餾水/ css文件夾

生成的文件這是的WebPack配置我到目前爲止。

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 
};