从编译的.scss创建关键CSS文件_Css_Sass_Gulp_Pagespeed_Preload

从编译的.scss创建关键CSS文件

css sass gulp

从编译的.scss创建关键CSS文件,css,sass,gulp,pagespeed,preload,Css,Sass,Gulp,Pagespeed,Preload,希望通过使用rel=“preload”指定CSS文件在我们网站上的加载顺序来提高页面速度。我们的想法是先预装我们的全球风格，然后预装我们的英雄区风格（因为这对我们的营销团队来说是页面上最重要的元素）我们使用Sass并遵循一个非常典型的设置，即我们站点上的每个组件或模块都被分块到它自己的部分.scss文件中，然后导入（@import）到我们的主样式.scss文件中我们通过Gulp将styles.scss文件编译成一个小型CSS文件，其中包含站点的所有样式（styles.min.CSS）我想创

希望通过使用

rel=“preload”

指定CSS文件在我们网站上的加载顺序来提高页面速度。我们的想法是先预装我们的全球风格，然后预装我们的英雄区风格（因为这对我们的营销团队来说是页面上最重要的元素）

我们使用Sass并遵循一个非常典型的设置，即我们站点上的每个组件或模块都被分块到它自己的部分

.scss

文件中，然后导入（@import）到我们的主

样式.scss

文件中

我们通过Gulp将

styles.scss

文件编译成一个小型CSS文件，其中包含站点的所有样式（

styles.min.CSS

）

我想创建3个不同的样式表（其中2个我将预加载）：

我理想地加载3个样式表，如下所示：

<head>
     <link rel="preload" href="globals_preload.min.css" as="style">
     <link rel="preload" href="hero_preload.min.css" as="style">
     <link rel="stylesheet" href="styles.min.css">
</head>

问题就在这里；每个组件或模块都依赖于全局样式和变量，但我不想两次加载全局样式（通过在

globals_preload.scss

和

style.scss

中导入它们）；如果我从

style.scss

中删除全局样式的导入语句，我的编译器将失败，因为后续模块将无法找到它们正在查找的sass变量

这种方法是否适用于Sass？有没有办法通过Gulp从编译的CSS中删除某些部分？我愿意接受任何建议。

我认为与.css文件相关的页面加载速度的主要问题是浏览器必须向服务器发出多少请求才能下载所有样式表。因此，当前最小化的单个.css文件可能是最快的选择。我认为与.css文件相关的页面加载速度的主要问题是浏览器为了下载所有样式表而必须向服务器发出的请求数量。因此，当前最小化的单个.css文件可能是最快的选择。

This is what the Sass tasks in our Gulpfile look like:

gulp.task('styles:sass', ['svg'], function() {
    const outputStyle = 'expanded';
    const path = (watching) ? devCSSPath : buildCSSPath;
    const building = (watching) ? false : true;

    return gulp.src(['src/sass/*.scss', 'src/apps/*/styles/*.scss'])
        .pipe(gulpif(watching, sourcemaps.init()))
        .pipe(sass({
            outputStyle: outputStyle,
            includePaths: [kdsRoot] }).on('error', sass.logError))
        .pipe(gulpif(watching, sourcemaps.write('maps')))
        .pipe(gulpif(building, rename((path) => {
                path.basename += ".min";
            })
        ))
    .pipe(gulp.dest(path));
});

gulp.task('styles:postcss', ['styles:sass'], function() {
    const path = (watching) ? devCSSPath : buildCSSPath;
    const plugins = [
        autoprefixer({ grid: true}),
        pixelsToRem({ base: 16 })
    ];
    return gulp.src([path + '*.css', path + '**/*.css'],{base: './'})
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./'))
});

globals_preload.scss

//Shared Global Styles
    @import "partials/reset"
    @import "partials/variables"
    @import "partials/typography"

hero_preload.scss

//Styles for the hero module
   @import "partials/hero"

styles.scss 
//Styles for the rest of the components/modules
//Global .scss files removed

//Individual Components and Modules
    @import "partials/buttons"
    @import "partials/cards"

    etc...

<head>
     <link rel="preload" href="globals_preload.min.css" as="style">
     <link rel="preload" href="hero_preload.min.css" as="style">
     <link rel="stylesheet" href="styles.min.css">
</head>