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

【问题标题】：Is there a way to run sass on a scss file without parsing imports?有没有办法在不解析导入的情况下在 scss 文件上运行 sass？
【发布时间】：2015-09-24 20:14:48
【问题描述】：

我正在 gulp 中构建一个工作流来构建和缩小我的 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) 当缩小器运行时，它不仅会去除空格 - 它会按照事物的顺序播放，可能还有一些其他聪明的东西。这会影响 CSS 的实际处理方式，在这种情况下，来自重置 (inherit) 的字体系列现在包含在主定义之后，在设置样式后将其重置。

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}

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

我不想 100% 依赖 gulp 来构建文件（所以我仍然可以手动对它们运行 sass），并在文件中留下一些参考来重置以清楚起见。

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

有什么想法、想法和解决方案吗？谢谢！

【问题讨论】：

听起来像是你的缩小器有问题，而不是其他任何问题。
你用的是什么压缩插件？什么版本？在被 sass 处理之后，但在你的 minifier 之前，你能确认事情的顺序是正确的吗？ @Nit 可能是对的。
谢谢大家，我正在使用 gulp-minify-css 1.2.1，是的，在 sass 步骤之后，它仍然处于正确的顺序 - 先重置，然后再重置。

标签： css sass gulp minify

【解决方案1】：

感谢@Nit 和@jeradg - 问题出在缩小器设置中。我不知道它是否应该做它正在做的事情（提交的错误 - https://github.com/jakubpawlowicz/clean-css/issues/681）但无论哪种方式都可以通过在 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({restructuring: false}))
        .pipe(gulp.dest(paths.style.bin))
        .pipe(livereload());
});

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

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

【讨论】：