2

我有这个 gulp css 缩小线：

.pipe(minifycss({advanced:false, keepSpecialComments : 0}).on('error', gutil.log))

当我缩小这个 css 部分时：

.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
    background-repeat: repeat-y;
    opacity: 0.3;
    filter: "alpha(opacity=30)"; 
    -ms-filter: "alpha(opacity=30)";
}

我明白了：

mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30')"}

由于那个括号的东西，它破坏了整个css。

我有什么选择可以避免这种情况吗？（无法切换到 nanocss atm）

4

2 回答 2

1

预先注意：如果你登陆这里，你可能会遇到问题 #676，这意味着你需要升级你的包。

你可能需要更新你的包，或者开始一些“分叉”调试来找到真正的根本原因，因为通过以下设置，你的输入会很好。（换句话说：状态对我来说没有复制。）

我做了什么来让你的输入正确缩小，从一个新的回购开始：

npm install gulp -g
npm install gulp --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-util --save-dev

这给了我这个package.json：

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-minify-css": "^1.2.3",
    "gulp-util": "^3.0.7"
  }
}

我已经提供了这个styles.css文件（你的代码，原样）：

.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
    background-repeat: repeat-y;
    opacity: 0.3;
    filter: "alpha(opacity=30)"; 
    -ms-filter: "alpha(opacity=30)";
}

进入这个gulfile.js：

'use strict';

var gulp = require('gulp');
var gutil = require('gulp-util');
var minifycss = require('gulp-minify-css');

gulp.task('default', [], function() {
    gulp.src('styles.css')
        .pipe(minifycss({advanced:false, keepSpecialComments : 0}).on('error', gutil.log))
        .pipe(gulp.dest('output'));
});

然后跑：

gulp

并得到了这个输出：

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}

据我所知，这个输出是正确的。

其中，当通过堆栈片段“整洁”功能获取时，等于：

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);
  background-repeat: repeat-y;
  opacity: .3;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)"
}

您是否尝试过检查您的输入 css？可能有问题隐藏在某个地方......

PS。我的输出与您的输出不同url:('....，那里是单引号。我会检查您的来源是否有任何杂散引号/不匹配的引号。

于 2016-02-01T16:32:13.983 回答
0

我无法添加评论来问这个问题，但你的意思是它因为以下括号而被打破：

filter: "alpha(opacity=30)"; 
-ms-filter: "alpha(opacity=30)";

如果是这样，我可能会完全放弃这些。所有主要浏览器都支持它自己的 opacity 属性，并且从 IE9 (链接) 开始。

如果您需要 IE 8 支持，我建议您使用 autoprefixer 并在缩小后将其添加到您的构建工具中。

于 2016-02-01T16:25:21.463 回答