PostCSS编译非常慢

Question

我纯粹出于好奇给了postCSS一个机会，但我已经有了大约2秒的编译时间。

我只使用3个插件：autoprefixer、postcss-import和postcss-nested

我有一个导入两个文件的app.css：

@import "_base/_base.css";

@import "_common/_common.css";

然后我有了_base.css：

.title {
    display: flex;
    color: white;
}

和_common.css：

header {
    background: red;

    h1 {
        background: black;
    }
}

我的观察者只在看/postCSS：

    ...
    watch: {
        postcss: {
            files: grunt.settings.devDir + 'postCSS/{,**/}*.css',
            tasks: ['postcss:dev']
        }
    },
    ...

postcss:开发任务：

        dev: {
            options: {
                map: false,
                processors: [
                    require('autoprefixer')({browsers: 'last 1 versions'}),
                    require('postcss-import')(),
                    require('postcss-nested')()
                ]
            },
            files: [{
                expand: true,
                cwd: grunt.settings.devDir + 'postCSS/',
                src: ['app.css'],
                dest: grunt.settings.devDir + 'css/'
            }]
        },

所以我的问题是，我怎么能有2秒的时间来编译3个小的css文件？我漏掉了什么吗？

谢谢!

Answer 1

现在，PostCSS有了这个问题，它太慢了。

在这文章中，作者使用PostCSS和不使用PostCSS复制工作流。最后的结果给您提供了PostCSS的想法，它有很大的潜力，但是您应该用CSSNext版本来改变工作任务。