咕噜CSS进口和路径

，我有以下的咕噜设置为我的项目的CSS的CONCAT和微小咕噜CSS进口和路径

cssmin: { 
     options: { 

     }, 
     concat: { 
      files: { 
       'dist/app.css': [ 
        'tmp/*.css', 
        'app/theme/css/vendors/fontello.css', 
        'app/theme/js/vendors/revolution/css/settings.css', 
        'app/theme/css/styles.css', 
        'app/theme/css/media-queries.css', 
        'app/app.css' 
       ] 
      } 
     }, 
     min: { 
      files: [{ 
       src: 'dist/app.css', 
       dest: 'dist/app.css' 
      }] 
     } 
    },

它正常工作不同的是，据我可以告诉它删除了以下进口声明

@import url("http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic");

并且所有第三方css文件都有相关的图像路径，这些路径不会被解析。我可以看到cssmin使用clean css应该能够帮助处理这些问题，但经过几个小时的搜索和阅读文档，我不能清楚的例子或如何配置以上解决这个问题？

来源

2015-03-18 Ben_hawk

你必须改变你导入PATH取决于这个目录的'dist/app.css'

代替css字体进口我建议你使用HTML link像下面

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' type='text/css'>

一定要改变这一切url Path's这些目录的：

    'tmp/*.css', 
        'app/theme/css/vendors/fontello.css', 
        'app/theme/js/vendors/revolution/css/settings.css', 
        'app/theme/css/styles.css', 
        'app/theme/css/media-queries.css', 
        'app/app.css'

取决于此output'dist/app.css':，因为gruntjs中没有任何任务可以为您更正css文件中的导入Path！

关于你的代码watch任务需要的是像这样：

watch: { 

     css: { 
      files: ['tmp/*.css', 
        'app/theme/css/vendors/fontello.css', 
        'app/theme/js/vendors/revolution/css/settings.css', 
        'app/theme/css/styles.css', 
        'app/theme/css/media-queries.css', 
        'app/app.css'], 
      tasks: ['concat','cssmin'], 
      options: { spawn: false } 
     } 
    },

并执行此命令grunt watch在你的终端，自动保留在这些文件中的更改跟踪和应用这些任务。

来源

2015-03-18 22:30:43

我使用Ze Rubeus建议将我的字体导入语句移动到HTML中（有点烦人，因为它意味着修改第三方css文件）。但我发现选项固定的CSS路径是

rebase: true, 
relativeTo: './'

我cssmin配置现在看起来

cssmin: { 
     options: { 
      rebase: true, 
      relativeTo: './' 
     }, 
     concat: { 
      files: { 
       'dist/app.css': [ 
        'tmp/*.css', 
        'app/theme/css/vendors/fontello.css', 
        'app/theme/js/vendors/revolution/css/settings.css', 
        'app/theme/css/styles.css', 
        'app/theme/css/media-queries.css', 
        'app/app.css' 
       ] 
      } 
     }, 
     min: { 
      files: [{ 
       src: 'dist/app.css', 
       dest: 'dist/app.css' 
      }] 
     } 
    }

而且一切工作:)

来源

2015-03-19 13:21:19

咕噜CSS进口和路径

回答

相关问题