如何缩小包含@import url 行的 css 文件

Question

我正在使用grunt-contrib-cssmin来缩小我的css文件，但我的css文件使用了@import url行，上面提到的grunt插件无法缩小这个css文件。我也尝试了clean-css和cssjoin工具来解决这个问题，但在知道之前没有任何效果。

**

• 咕噜咕噜的文件：

**

grunt.initConfig({
        // Metadata
        pkg: grunt.file.readJSON('package.json'),
        cssmin: {
          minified_css_admin: {
              files: {
                  'public/admin/css/minified-css-admin.min.css'     ['public/admin/prettify/prettify.css','public/admin/css/developer.css']
              }
          }
        }
    });
    // These plugins provide necessary tasks
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // Default task
    grunt.registerTask('default', ['admin-default']);
    grunt.registerTask('admin-default', ['cssmin:minified_css_admin']);
};

**

• 漂亮.css

**

@import url('bootstrap.min.css');
@import url('bootstrap-responsive.min.css');
@import url('uniform.tp.css');
@import url('jquery.ui.css');
@import url('colorpicker.css');
@import url('colorbox.css');
@import url('jquery.jgrowl.css');
@import url('jquery.alerts.css');
@import url('animate.min.css');
@import url('animate.delay.css');
@import url('font-awesome.css');
@import url('jquery.tagsinput.css');
@import url('ui.spinner.css');
@import url('jquery.chosen.css');
@import url('fullcalendar.css');
@import url('font-awesome-ie7.css');
@import url('../fonts/roboto.css');

/***** RESET BROWSER STYLES *****/
/********************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

Answer 1

根据 https://github.com/gruntjs/grunt-contrib-cssmin/issues/75 cssmin要求您设置根目录，以便它保留相对@import URL。

   cssmin: {
        options: {
            report: 'min',
            root: '../../webroot',
       }
   }