Question

我最近开始遇到一个问题，我的gulpfile搞乱了CSS内容属性。仅当内容值是符号（如点或箭头）时才会执行此操作。防爆。这是SCSS文件的一部分，内容适当。

    ul {
  font-size: 18px;
  list-style: none;
  padding-left: 0;

  li {
    text-indent: -13px;
    padding-left: 13px;
    margin-bottom: 1em;

    &:before {
      content: '•';
      margin-right: 5px;
      font-size: 1.3em;
      line-height: 1em;
      vertical-align: -2px;
    }
    li {
      margin-top: 5px;
      text-indent: -18px;
      padding-left: 18px;          

      &:before {
        content: '›';
        margin-right: 10px;
      }
    }
  }
}

但这是我在编译后在最终CSS文件中看到的内容。

body main ul li:before{content:"ΓÇó";margin-right:5px;font-size:1.3em;line-height:1em;vertical-align:-2px}body main ul li li{margin-top:5px;text-indent:-18px;padding-left:18px}body main ul li li:before{content:"ΓÇ║";margin-right:10px}

这是我正在使用的gulpfile。

var gulp = require('gulp');
var minifycss = require('gulp-cssnano');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('css', function() {
    return sass('scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(autoprefixer())
        .pipe(concat('style.css'))
        .on('error', sass.logError)
        .pipe(minifycss())
        .pipe(sourcemaps.write(''))
        .pipe(gulp.dest('./scss'))
            .pipe(notify({ message: 'Wait for it....wait for it!!!' }));
});

gulp.task('default', function() {
    gulp.watch('scss/**/*.scss',['css']);
});

任何人都知道为什么会这样，以及我可以做些什么来解决它？

Gulp正在搞乱CSS内容

0 个答案: