CSS和Grunt缩小中的相对路径？

在我提出这个问题之前，我想指出这里有关于StackOverflow的一些问题，但没有一个能提供问题的准确解决方案

---

问题

我有一个工作流设置，Grunt将多个css文件合并并缩小为一个单一的文件，用于生产环境

我面临的问题是，字体和图像路径在运行Grunt后中断，因为它们仍然指向其现有的相对文件路径

例如：

在

static/homepage/startup/common files/css/icon font.css

中，我有以下css规则：

@font-face{font-family:Flat-UI-Icons;src:url(../fonts/Startup-Icons.eot);

在Grunfile中，我指定我希望缩小的css文件的输出是

style.min.css

位于

static/css/custom/homepage/

。问题是，文件路径发生更改，导致不再找到所有字体和图像依赖项，并在浏览器中返回404状态

我为解决这个问题所做的努力

我认为有两种方法可以解决此问题：

复制所有从属文件，使其相对于

style.min.css

所在的新目录。这样做的缺点是，它可能会很快变得混乱，破坏我的项目文件夹结构

手动更改路径。但话说回来，这有什么意义？Grunt是为自动化任务而设计的 有人知道如何解决这个问题吗？我已经在这上面浪费了将近10个小时，我开始放弃了。人们声称已经在会议上解决了这个问题，但没有人真正说出他们是如何解决的

编辑：

我浏览了源代码，似乎可以将

relativeTo

属性传递给minifier对象。我把这件事搞得一团糟，但我还是被卡住了。如果我有进一步的进展，我会向你汇报的

编辑：

好的，我终于找到了一些文档，解释了

relativeTo

（和其他）属性的作用。我仍然坚持到底我的文件结构应该是什么样的配置

relativeTo - path to resolve relative @import rules and URLs
root - path to resolve absolute @import rules and rebase relative URLs
roundingPrecision - rounding precision; defaults to 2; -1 disables rounding
target - path to a folder or an output file to which rebase all URLs

---

以下是我的Grunt配置文件供参考：

    module.exports = function(grunt) {
        grunt.initConfig({
            concat: {
                homepage: {
                    src: [
                        'static/homepage/startup/common-files/css/icon-font.css', 
                        'static/homepage/startup/flat-ui/bootstrap/css/bootstrap.css',
                        'static/homepage/startup/flat-ui/css/flat-ui.css',
                        'static/homepage/static/css/style.css'
                    ],
                    dest: 'static/css/custom/homepage/compiled.css',
                }
            },
            cssmin: {

                homepage: {
                    src: 'static/css/custom/homepage/compiled.css',
                    dest: 'static/css/custom/homepage/style.min.css'
                }   
            }                           
        });             

        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks("grunt-css-url-rewrite");
        grunt.registerTask('build', ['concat', 'cssmin']);
        grunt.registerTask('default', ["build"]);
};

---

谢谢。

在

static/css/custom/homepage

中创建一个较少的文件作为

样式。较少的

@import
您的css：

@import "../../../homepage/startup/common-files/css/icon-font.css";
@import "../../../homepage/startup/flat-ui/bootstrap/css/bootstrap.css";
@import "../../../homepage/startup/flat-ui/css/flat-ui.css";
@import "../../../homepage/static/css/style.css";

然后在gruntfile.js中：

module.exports = function(grunt) {
    grunt.initConfig({
      less: {
        dist: {
            options: {
                compress: true,
                sourceMap: false,
                // Add any other path/to/fonts here
                paths: ['static/homepage/startup/common-files']
            },
            files: {
                'public/css/dist/style.min.css': 'public/css/default/styles.less'
            }
        }
    }       
  });             

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks("grunt-css-url-rewrite");
  grunt.registerTask('build', ["less:dist"]);
  grunt.registerTask('default', ["build"]);
};

我也有同样的问题，花了几个小时试图玩“relativeTo”、“target”和“root”，但没有成功：/I可能正在接近解决方案！在这里看我的评论（我的用户名是jjmpsp）：好的，我明天再看。（我已经感到疼痛了）我终于成功了。您应该删除concat任务，并且只使用cssmin。然后尝试使用options.target，可能是“static/css/custom/homepage/style.min.css”。对于像我这样使用usemin的用户，可以通过手动设置流来删除concat任务。