css - GRUNT：grunt-postcss 与 sass 一起使用时不执行 cssnano - 如果 scss 文件很长

Question

我同时使用sass解析器和gruntpostcsson cssnanocssnano`watch. 如果它是一个短文件，它解析文件就好了，但是我的 scss/css 文件得到长 css 文件，它没有解析文件。任何人都知道这是为什么以及如何解决它？

这里的 package.json、Gruntfile.js 和一个可以工作的 short-css-file.css 和一个 cssnano 不解析它的 long-css-file.css。

包.json

{
  "name": "testpage",
  "version": "1.0.0",
  "description": "testpage grunt",
  "main": "Gruntfile.js",
  "dependencies": {},
  "devDependencies": {
    "cssnano": "^3.10.0",
    "grunt": "^1.0.3",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-postcss": "^0.8.0",
    "load-grunt-tasks": "^3.5.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Gruntfile.js

module.exports = function(grunt) {
    
    grunt.initConfig({
        watch: {
            css: {
                files:  'wp-content/themes/mytheme/assets/css/*.scss',
                tasks: ['sass', 'postcss']
            },
        },
        sass: {
            options: {
                sourceMap: true
            },
            dist: {
                files: {
                    'wp-content/themes/mytheme/assets/css/default.css': 'wp-content/themes/mytheme/assets/css/default.scss'
                }
            }
        },
        postcss: {
            options: {
                map: {
                    inline: false, // save all sourcemaps as separate files... 
                    sourcesContent: true,
                },
                processors: [
                    require('autoprefixer')({browsers: ['last 2 versions', 'ie 8', 'ie 9']}), // add vendor prefixes
                    require('cssnano')({zindex: false}) // minify the result
                ]
            },
            dist: {
                files: {
                    'wp-content/themes/mytheme/assets/css/default.css': 'wp-content/themes/mytheme/assets/css/default.css'
                }
            }
        },
    });

    require('load-grunt-tasks')(grunt);

    grunt.registerTask('default', ['watch', 'sass', 'postcss']);

};

短css文件.css

// Test 
    .css_nano, .css_nano + p, [class*="css_nano"], .css_nano {
        /* cssnano will remove this comment */
        display: flex;
        font-weight: normal;
        margin-top: 1rem;
        margin-bottom: 2rem;
        margin-left: 1.5rem;
        margin-right: 2.5rem;
        font-weight: normal;
        padding: 1.75rem;
        width: calc(50rem - (2 * 1.75rem));
    }

long-css-file.css见 jsfiddle

https://jsfiddle.net/12p3Lxcn/

标签： cssgruntjspostcssgrunt-contrib-watchcssnano