0

I'm giving postCSS a go by pure curiosity but I'm having a compilation time around ~2sec already.

I'm only using 3 plugins : autoprefixer, postcss-import and postcss-nested

I've got app.css that imports 2 files :

@import "_base/_base.css";

@import "_common/_common.css";

then I have _base.css :

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

and _common.css :

header {
    background: red;

    h1 {
        background: black;
    }
}

My watcher is only watching /postCSS :

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

postcss:dev task:

        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/'
            }]
        },

So my question is, how can I already get 2 seconds to compile 3 small css files ? Am I missing something ?

Thanks!

4

1 に答える 1

1

現在、PostCSS にはこの問題があります。遅すぎます。

この記事では、著者はPostCSS を使用したワークフローと PostCSS を使用しないワークフローを複製します。最終的な結果から、PostCSS には多くの可能性があることがわかりますが、CSSNext バージョンで作業タスクを変更する必要があります。

于 2016-05-08T08:23:10.707 に答える