在我提出这个问题之前,我想指出StackOverflow上有several similar questions posted,但它们都没有提供准确的解决方案。问题
<小时/> 问题
我有一个工作流程设置,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);
在我的Gruntfile中,我指定我希望缩小的css文件的输出位于style.min.css
static/css/custom/homepage/
。这样做的问题是文件路径发生变化,导致无法再找到所有字体和图像依赖关系,并在浏览器中返回404状态。
我尝试解决此问题
我认为有两种方法可以解决这个问题:
style.min.css
所在的新目录。这样做的缺点是它可能很快变得混乱并破坏我的项目文件夹结构!有人知道如何解决这个问题吗?我已经浪费了近10个小时,我开始放弃了。人们声称已经在Github issue page解决了这个问题,但是没有人真正说过他们如何修复它。
编辑:
我查看了clean-css library源代码,似乎您可以将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"]);
};
感谢。
答案 0 :(得分:0)
在static/css/custom/homepage
中以styles.less
的形式创建一个较少的文件
@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"]);
};