Question

我想为我工作的公司中的前端项目安装SASS结构。

实际结构的重点是尽可能保持样式尽可能轻松地编译，缩小，然后连接所有单独的scss文件。它工作正常，结果是一个lightweigth css唯一文件，但组织不是最好的。对于一个新手来说，满足这个代码有点创伤，我的意思是，不是核科学，但我承认，它很脏。

所以，我尝试使用@import规则挂载基础结构，将所有文件与导入文件合并为一个，如：

// main.scss
@import "_variables";
@import "_mixins";
@import "materialize"; // yes, we use materialize here
....

但是输出css真可怕，使用导入约为1mb的样式vs使用concats的~175kb ......不可接受。

我们的目标是扩展物化类（没有修改框架的核心），但我不知道是否可以使用concats方法。

你知道任何有趣的方法吗？理论？ stackoverflow的另一个问题？意见？

谢谢！

修改：

出于演示目的，这里有2个gulp任务和输出文件/ scss声明：

Concats

gulp.task("concat", () => {
    gulp.src("./concats/*.scss")
        .pipe(maps.init())
        .pipe(sass({
            outputStyle: "compressed"
        }))
        .pipe(autoprefixer())
        .pipe(concat("concat.min.css"))
        .pipe(maps.write())
        .pipe(gulp.dest("./concats/dist"));
});

没有其他需要。

进口

// gulp task
gulp.task("imports", () => {
    gulp.src("./imports/main.scss")
        .pipe(maps.init())
        .pipe(sass({
            outputStyle: "compressed",
            includePaths: "./node_modules/materialize-css/sass"
        }))
        .pipe(autoprefixer())
        .pipe(maps.write())
        .pipe(gulp.dest("./imports/dist"));
});

SCSS进口

@import "_colors";
@import "_vars";
@import "materialize";
@import "_actionbar";
@import "_article-image";
@import "_ccsfont";
@import "_common";
@import "_din_fonts";
@import "_grid";
@import "_helpers";
@import "_ice";
@import "_locale";
@import "_material-icons";
@import "_medium-default";
@import "_medium-editor";
@import "_navbar";
@import "_overrides";
@import "_post-collection";
@import "_text-editor";
@import "_tooltip.scss";
@import "_user-profile";
@import "_yoast-seo";
@import "_wireframe-form";

**注意：**我们正在将物化大小导入我们的main.scss我正在考虑......这不是一个好主意，我会尝试一个想法并发布它。

SCSS代码结构的方法

0 个答案: