我使用 cssmin 和以下“内容”文件夹结构:
src
|--dir1
| |--style1.css
| |--images
| |--image1.png
|--dir2
|--style2.css
|--images
|--image2.png
dist
|--styles.min.css
|--styles.min.css.map
其中 styles.min.css 和 styles.min.css.map 是连接/缩小“src”文件夹中所有样式表的结果。
我首先遇到的问题是 styles.min.css 在错误的位置包含图像的 URL(即“images/image1.png”而不是“../src/dir1/images/image1.png”),但幸运的是,这个 grunt 配置已修复那:
cssmin: {
options: {
rebase: true,
sourceMap: true
},
all: {
options: {
keepSpecialComments: 0
},
files: {
'content/dist/styles.min.css': ["content/src/dir1/style1.css", "content/src/dir2/style2.css"]
}
}
}
新问题:生成的源映射(“styles.min.css.map”)包含这样的源:[“content/src/dir1/style1.css”,“content/src/dir2/style2.css”]而不是[“.. /src/dir1/style1.css", "../src/dir2/style2.css"]。这意味着地图指向不正确的位置,例如:
“内容/dist/content/src/dir1/style1.css”和“内容/dist/content/src/dir2/style2.css”
我可以做什么来解决这个问题?
作为参考,我也尝试过 csswring,但是尽管源映射工作正常,我发现一般图像/导入 url 变基无法正常工作,所以回到 cssmin。
非常感谢!