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

编程问答 2022-06-11

问题描述

我正在sass上同时使用gruntpostcss解析器和cssnano与watch. 来解析文件cssnano`，如果文件很短，就很好了，但是我的scss / css文件获取长的CSS文件，但未解析该文件。有谁知道这是为什么以及如何解决？

在这里，package.json，Gruntfile.js以及可以工作的short-css-file.css和cssnano不会对其进行解析的long-css-file.css都可以。

package.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']);

};

short-css-file.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/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cssnanogrunt-contrib-watchgruntjspostcss