缩小错误与缩小

Question

我有这个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(

Answer 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？某处可能隐藏着一个问题...

---

附言。我的输出与您的输出不同，因为您url:('....，那里只有一个引号。我会检查您的来源是否有任何杂散的引号/不匹配的引号。

Answer 2

我不能添加评论来问这个问题，但你的意思是它因为以下括号而中断：

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

如果是这样，我可能会完全放弃这些。所有主流浏览器和 IE9(链接(都支持它本身的不透明度属性。

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