2

我有以下目录结构（仅出于说明目的显示相关位）：

proj \
     \ Gruntfile.js
     \ package.json
     \ test \ (all my tests are in this folder structure)
     \ app \
           \ index.html
           \ scripts \ (all my scripts are in here)
           \ views \ (all views are in here)
           \ styles \
                    \ style.css
                    \ oldie.css
                    \ print.css
           \ images \
                    \ hires \ (all high resolution images are here)
                    \ lowres \ (all low resolution images are here)

我的 Gruntfile.js 文件的指南针部分如下所示：

compass: {
    options: {
        require: "susy",
        sassDir: '<%= my.app %>/styles',
        cssDir: '.tmp/styles',
        imagesDir: '<%= my.app %>/images',
        javascriptsDir: '<%= my.app %>/scripts',
        fontsDir: '<%= my.app %>/styles/fonts',
        importPath: 'app/components',
        relativeAssets: true
    },
    dist: {},
    server: {
        options: {
            debugInfo: true
        }
    }
}

<%= my.app %>决议app为。我的问题是我无法指定生成的 CSS 文件中的图像应该有以 开头的路径images/，而不是app/images像现在这样。

如果我更改imagesDir: '<%= my.app %>/images'为imagesDir: 'images'（或将后者添加为imagesPath选项的值），当 compass 尝试编译时，我会收到以下错误：

在与“lowres/sprites/*.png”匹配的加载路径中找不到文件。您当前的加载路径是：/Users/joachimdyndale/Development/myProject/myapp_joachim/proj/images

我尝试添加一个config: 'compass.rb'属性并在 compass.rb 文件中有以下内容：

http_images_path = '../images'
http_generated_images_path = '../images'

但是，以上完全没有效果。

所以我的问题是：是否有某种我尚未发现的方法来配置所有这些，以便它既能找到图像又能将正确的路径写入 CSS 文件，或者我是否必须更改我的目录结构才能移动文件夹中的所有内容都上app一层？我真的很喜欢目前的结构，但我承认这可能是目前 Compass 根本不支持的极端情况。

我正在使用grunt-contrib-compassgrunt 插件。

4

2 回答 2

5

我也有同样的问题，解决了。

导出的 css 中 url() 中的图像路径由 compass 任务和 cssmin 任务转换。我想知道 cssmin 任务的设置是否会导致此问题，而不是指南针任务的设置。

我们期望 dist/styles 的相对路径（而不是 cssDir），所以 relativeAssets 应该设置为 false，httpImagesPath 应该设置为 '../images'。设置这些选项后，您将在 .tmp/styles/*.css 中看到 url(../images/hoge.jpg)。

但是从 compass 任务导出的相对路径将被 cssmin 任务转换回绝对路径。为了避免这种情况，我们应该在 cssmin 任务的选项中将 noRebase 选项设置为 false。

Gruntfile.js 中的以下设置在我的项目中按预期工作：

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
  }
}

此外，这些设置可能会阻止在 usemin 任务中转换为缓存破坏的 url（例如，../images/hoge.jpg -> ../images/43f78e35.hoge.jpg）。为了避免这种情况，我在 usemin 任务的选项中设置了以下设置：

usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  options: {
    assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles']    // <- add styles directory
  }
}
于 2014-05-30T03:13:35.893 回答
0

正如我的评论的后续行动，诀窍应该设置relativeAssets为false. 这一直是一个奇怪的描述，但我认为compass 文档比 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.

我已经重新阅读了您的问题几次，看起来这可能是发生了什么？资产与样式表相关，而不是与您的应用程序目录相关？我必须看到之前/之后，但很高兴它对你有用！

于 2013-06-05T13:16:00.393 回答