使用 Webpack 的 Postcss答案

【问题标题】：Postcss with Webpack使用 Webpack 的 Postcss
【发布时间】：2018-04-02 14:04:26
【问题描述】：

我试图让 webpack 文件与 postcss 一起使用，但没有成功。

我已将我的 postcss 文件命名为 src/css 文件夹中的 .pcss 扩展名

我正在寻找在 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')
    ]
}

我可以知道我做错了什么吗？

【问题讨论】：

标签： webpack postcss

【解决方案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
};

【讨论】：