Question

我正在构建一个工作流程来构建和缩小我的SCSS和JS - 通常的东西。

我使用Eric Meyer的css重置如下：

@import 'reset.scss';

h1 {
    font-size: 4em;
    font-family: "Oswald", Verdana, sans-serif;
    font-weight: 400;
    text-align: center;
    margin: 20px 0 40px 0;
}

section h1 {
    font-size: 2em;
    font-family: "Oswald", Verdana, sans-serif;
    font-weight: 300;
    margin: 40px 0 15px 0;
}

它在自己的文件中导入。

然后我有一个gulp任务：

gulp.task('buildScss', () => {
    return sass(paths.style.src+path.sep+'*.scss', { style: 'expanded' })
        .pipe(gulp.dest(paths.style.bin))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest(paths.style.bin));
});

这会在CSS文件上运行sass，将它们转储到bin / style文件夹，将名称更改为[name] .min.css，缩小并保存。

问题在于：a）sass进程导入重置的css文件并将其包含在主编译文件中; b）当minifier运行时，它不会剥离空白 - 它按照事物的顺序播放可能还有其他一些聪明的东西。这会影响CSS的实际处理方式，在这种情况下，重置（inherit）后的字体系列现在包含在主要定义之后，在设置样式后重置它。< / p>

h1,section h1{font-family:Oswald,Verdana,sans-serif}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}h1{font-size:4em;font-weight:400;text-align:center;margin:20px 0 40px}section h1{font-size:2em;font-weight:300;margin:40px 0 15px}

我认为一个选择是，如果我可以将@import留在原地并且在运行sass时不遵循它，但我找不到这样做的选项。

我不想100％依赖gulp构建文件（因此我仍然可以手动对它们运行sass）并在文件中保留一些引用以便清除。

我也意识到我可以删除section h1中的字体系列定义，因为它是继承的，这解决了这种特殊情况下的问题。但是很容易意外地再次陷入这种情况，不断调试它会很令人沮丧。

任何想法，想法，解决方案？谢谢！

Answer 1

感谢@Nit和@jeradg - 问题出在minifier设置中。我不知道它应该做它正在做的事情（提交错误 - https://github.com/jakubpawlowicz/clean-css/issues/681），但无论哪种方式都可以通过设置一个开关来停止它：

gulp.task('buildScss', () => {
    return sass(paths.style.src+path.sep+'*.scss', { style: 'expanded' })
        .pipe(gulp.dest(paths.style.bin))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss({restructuring: false}))
        .pipe(gulp.dest(paths.style.bin))
        .pipe(livereload());
});

此更改将是此行中的restructuring参数：

.pipe(minifycss({restructuring: false}))

有没有办法在没有解析导入的情况下在scss文件上运行sass？

1 个答案: