使用 Webpack 的 Postcss

Question

我试图让一个 webpack 文件与 postcss 一起工作，但没有成功。

我在 src/css 文件夹[=12= 中用 .pcss 扩展名命名了我的 postcss 文件]

我正在寻找 dist/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
};

使用 Webpack 的 Postcss

Postcss with Webpack

webpack

postcss