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 回答