Grunt compass task not compatible with this directory structure?

倖福魔咒の 提交于 2019-12-06 05:11:16

Just as followup to my comment, the trick should be setting relativeAssets to false. It's always been a weird description but I think the compass documentation explains it better than how it's explained at the docs for grunt-contrib-compass:

Indicates whether the compass helper functions should generate relative urls from the generated css to assets, or absolute urls using the http path for that asset type.

I've re-read your question a few times and it looks like that's possibly what was happening? The assets were relative to the stylesheets, not to your app dir? I'd have to see the before/after but glad it worked for you!

haiiro-shimeji

I have the same problem, and solved.

The image-path in url() in the exported css is converted by the compass task and cssmin task. I wonder if the cssmin task's settings cause this problem rather than those of the compass task.

We expect relative paths to dist/styles (not to the cssDir), so relativeAssets should be set to false, and httpImagesPath to '../images'. You will see url(../images/hoge.jpg) in .tmp/styles/*.css when these options are set.

But relative paths exported from the compass task will be converted back to the absolute paths by the cssmin task. To avoid this, we should set the noRebase option to false in the cssmin task's options.

The following settings in Gruntfile.js are working as expected in my project:

compass: {
  options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    generatedImagesDir: '.tmp/images/generated',
    imagesDir: '<%= yeoman.app %>/images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: '<%= yeoman.app %>/bower_components',
    httpImagesPath: '../images',
    httpGeneratedImagesPath: '../images/generated',
    httpFontsPath: '/styles/fonts',
    relativeAssets: false,
    assetCacheBuster: false,
    raw: 'Sass::Script::Number.precision = 10\n'
  },
}

cssmin: {
  options: {
    root: '<%= yeoman.app %>',
    noRebase: true
  }
}

Additionally, these settings might prevent the conversion to cache-bustered urls (for example, ../images/hoge.jpg -> ../images/43f78e35.hoge.jpg) in the usemin task. To avoid this, I set the following settings in the usemin task's options:

usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  options: {
    assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles']    // <- add styles directory
  }
}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!