GRUNT CSS-MIN does not process with @import inline

0

Hello,

I'm building an html page where I merge js files using Grunt and the

  • grunt-usemin
  • grunt-contrib-uglify
  • grunt-contrib-concat

To compile js I use the following structure

<!-- build:js js/compact/modulos.js --> 
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../node_modules/onsenui/js/onsenui.min.js"></script>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
<!-- endbuild --> 

and set up tasks in grunt

grunt.initConfig({
    // tarefas para fazer merge dos arquivos de js e css
    // funciona em conjunto com tags no HTML
    // <!-- build:js js/core.js --> 
    // o codigo acima pega todos os scripts entre a tag e cria um arquivo final chamado core.js dentro da pasta js
    useminPrepare : {
        html : 'www/index.html',
        options : {
            dest : 'www'
        }
    },
    usemin : {
        html : 'www/index.html',
        css : 'www/css/*.css'
    },
    concat : {
        options : {
            dest : '.'
        }
    }
});

this way when running the task

grunt.registerTask('minfiles',['useminPrepare', 'concat', 'uglify', 'usemin']);

the js/compact/modulos.js file is generated.

According to grunt-usemin documentation you can also use it to compact CSS using grunt-contrib-cssmin

Then I added the module and added the cssmin process to the merge task

grunt.registerTask('minfiles',['useminPrepare', 'concat', 'uglify', 'cssmin', 'usemin']);

and set up in html

<!-- build:css css/onsen.css -->
<link rel="stylesheet" type="text/css" href="../node_modules/onsenui/css/onsenui.min.css">
<link rel="stylesheet" type="text/css" href="../node_modules/onsenui/css/onsen-css-components.css">
<!-- endbuild --> 

works only if the css files do not have @import inline.

The returned error, for example, is

Running "cssmin:root" (cssmin) task
Warning: Ignoring local @import of "node_modules/onsenui/css/font_awesome" as resource is missing.,Ignoring local @import of "node_modules/onsenui/css/ionicons" as resource is missing.,Ignorin                                                                               g local @import of "node_modules/onsenui/css/material-design-iconic-font" as resource is missing. Use --force to continue.

Aborted due to warnings.

Looking for a little more, I saw that I can configure the task to do two things  1 ignore @import  2 inform the directory where references should be searched for

I tried both

// ignorar os imports
cssmin : {
  options : {
    'processImport': false
  },
}

and

// informar o diretório base para os arquivos
cssmin : {
  root: 'node_modules/onsenui/css'
}

and neither works, still returning the error.

What should I do to get the css created correctly?

Thanks for the help

    
asked by anonymous 20.02.2018 / 15:48

0 answers