Grunt CSS导入和路径
Grunt CSS导入和路径
提问于 2015-03-19 05:59:46
我在Grunt中有以下设置，用于合并和缩小我的项目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语句
@import url("http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic");并且所有第三方css文件都有未解析的相对图像路径。我可以看到cssmin使用了clean css，它应该能够帮助处理这些问题，但在搜索和阅读了几个小时的文档后，我没有任何明确的例子或关于如何配置上面的配置来解决这个问题？
回答 2
Stack Overflow用户
发布于 2015-03-19 21:21:19
我使用了Ze Rubeus的建议，将我的font import语句移动到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'
}]
}
}一切都在正常运行:)
Stack Overflow用户
发布于 2015-03-19 06:30:43
您必须根据此目录'dist/app.css'更改您导入的所有PATH
我建议您使用如下所示的超文本标记语言link，而不是css字体导入
<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，以自动跟踪这些文件中的更改并应用这些任务。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29133514
复制相关文章
相似问题
腾讯云开发者
