问题 如何在sass-loader和ExtractTextPlugin完成后运行POSTCSS？

我试图弄清楚如何在我的最终输出css文件上运行postcss。

'strict';

const path = require('path');
const webpack = require('webpack');
const StatsPlugin = require('stats-webpack-plugin');

/* POSTCSS Optimizations of CSS files */
const clean = require('postcss-clean');
const colorMin = require('postcss-colormin');
const discardDuplicates = require('postcss-discard-duplicates');
const discardEmpty = require('postcss-discard-empty');
const mergeRules = require('postcss-merge-rules');
const mergeLonghand = require('postcss-merge-longhand');
const minifyFonts = require('postcss-minify-font-values');
const orderedValues = require('postcss-ordered-values');
const uniqueSelectors = require('postcss-unique-selectors');

/* EXTRACT CSS for optimization and parallel loading */
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/index',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js',
        chunkFilename: '[id].bundle.js',
        publicPath: '/dist/',
        soureMapFilename: '[file].map'
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.NoErrorsPlugin(),
        new StatsPlugin('stats.json'),
        new ExtractTextPlugin('assets/css/[name].css?[hash]-[chunkhash]-[contenthash]-[name]', {
            disable: false,
            allChunks: true
        })
    ],
    node: {
        net: 'empty',
        tls: 'empty',
        dns: 'empty'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['babel'],
            exclude: /node_modules/,
            include: __dirname
        },
        {
            test: /\.scss$/i,
            loader: ExtractTextPlugin.extract('style', ['css', 'postcss', 'sass'])
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style', ['css'])
        },
        {
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
            loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
        }]
    },
    postcss() {
        return [mergeRules, mergeLonghand, colorMin, clean, discardEmpty,
                orderedValues, minifyFonts, uniqueSelectors, discardDuplicates];
    },
    sassLoader: {
        includePaths: [path.resolve(__dirname, './node_modules')]
    }
};

我当前的配置很好地编译了所有依赖的SASS并将其与静态CSS导入并使用ExtractTextPlugin提取它们。

看来我可以在CSS的块上运行POSTCSS优化，但不是最终产品。这意味着我无法摆脱重复的CSS规则。

如何在最终状态CSS文件上运行POSTCSS后，sass-loader和extractTextPlugin已经发挥了作用？

我在使用ExtractTextPlugin进行类似的设置工作时遇到了问题，我的问题在于我如何使用ExtractTextPlugin插件。

我只是将它用于生产构建，这对我有用：

module: {
    loaders: [
        {   // styles
            test: /\.scss$/,
            include: [ path.join(__dirname, 'source/styles') ],
            loader: ExtractTextPlugin.extract('style', ['css', 'postcss', 'sass'])
        }
    ]
},

注意['css'，'postcss'，'sass']的数组。这是我失踪的部分。此数组将首先解析然后运行将由插件最终提取的样式。

而且，在我正在使用的插件阵列上 new ExtractTextPlugin('styles-[chunkhash].css')。

由于ExtractTextPlugin目前不支持“onComplete”回调或类似，你可以使用 WebpackShellPlugin。

设置运行所需的脚本 postcss 插件并执行您的脚本 onBuildExit 处理编译的CSS。

你可以搬家 postcss 装载机 module.postLoaders （ webpack.github.io/docs/... ）但我不确定它是否适用 ExtractTextPlugin 。 - Bob Sponge

不幸的是它似乎不起作用。我假设因为加载器的工作方式，当我到postLoader执行POSTCSS时，文件中没有任何CSS可以操作，也没有办法将postcss指向新合并的CSS文件/文件在dist。我不认为加载器可以只指向文件系统上的任意文件，我认为它必须连接到JS入口点。 - nhavar

我在上面的示例中已经列出了几乎完全相同的代码（不包括包含行），它几乎没有任何变化。我已经尝试了分离和管道示例。提取物工作得很好并且总是有，但是有很多重复 - nhavar

我只是有一个疯狂的想法'可能'有所帮助。如果你尝试这样的事情会发生什么： loader: ExtractTextPlugin.extract('style', 'postcss', ['css', 'postcss', 'sass'])。注意数组外的post css但是在样式任务之前（从右到左）。 - rafaelbiten

问题如何在sass-loader和ExtractTextPlugin完成后运行POSTCSS？

答案:

热门问题

问题 如何在sass-loader和ExtractTextPlugin完成后运行POSTCSS？

答案:

热门问题

问题如何在sass-loader和ExtractTextPlugin完成后运行POSTCSS？