Блог

Я использую как sass синтаксический анализатор, так и gruntpostcss с cssnano watch. помощью cssnano` отлично анализирует файл, если это короткий файл, но если мой файл scss / css получает длинный файл css, он не анализирует файл. Кто-нибудь знает, почему это так и как это исправить?

Здесь package.json, Gruntfile.js и как короткий css-file.css, который работает, так и длинный css-file.css, где cssnano не анализирует его.

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" amp;amp; 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-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/