Gulpfile:如何将每个SCSS编译成单独的CSS，具有相同的名称，但具有附加的通用样式
首先，我希望你们能温柔一点。最近几年，我没有编写太多代码，而且自从gulp更新之后，我改变了语法，编写函数并导出，我以某种方式使它工作起来，到目前为止没有任何变化，也不知道它们是否改变了其他东西。我对现在的情况很满意，但我不知道如何让它以另一种方式运作。
所以不管怎么说，我现在正在做一个项目，那里会有很多html，每个html都会有非常不同的样式，但有些会很常见。我想为每个html创建一个具有公共样式的main.scss文件，但是我想要为每个html创建一个单独的scss，它的样式是特定的。这样，我最终希望有一个单独的css文件，该文件由同名的特定scss与main.scss组合而成，这样它就不必下载一个大文件，而只需下载我需要的样式。
示例：
main.scss
01.scss
02.scss
03.scss将汇编成：
01.css ( main.scss + 01.scss )
02.css ( main.scss + 02.scss )
03.css ( main.scss + 03.scss )这是我现在的文件：
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
function style() {
return gulp.src('./scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
}
function watch() {
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('./scss/**/*.scss', style);
gulp.watch('./*.html').on('change', browserSync.reload);
gulp.watch('./js/**/*.js').on('change', browserSync.reload);
}
exports.style = style;
exports.watch = watch;如果你知道如何以更好的方式做这件事，我会非常感激的。
回答 1
Stack Overflow用户
发布于 2021-01-24 07:02:33
我认为您必须将main.scss导入到其他文件中，并将main.scss排除在gulp.src之外。
function style() {
return gulp.src(['./scss/**/*.scss', '!./scss/**/main.scss'])
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
}'!./scss/**/main.scss' --这将否定或排除该文件被传递到此任务中--我假设main.scss与其他scss文件位于同一个文件夹中，如果不是这样，则必须修改路径。
然后将@import main.scss放入每个01.scss、02.scss等文件中：
@import "main.scss"; //也假设在同一个文件夹中
您可以将这个导入语句放在文件的任何位置，如果它是第一个，那么任何main.scss样式都将被0x.scss文件其余部分中的冲突样式覆盖。如果将导入语句放在末尾，则main.scss样式将覆盖以前任何冲突的样式。
注意:此时您确实应该使用@use而不是@import和狼吞虎咽而不是gulp-sass。见sass @use规则。
// in your gulpfile.js const sass = require('gulp-dart-sass'); /一旦安装
@use "main.scss"; //必须位于每个scss文件的顶部，例如01.scss
https://stackoverflow.com/questions/65870893
复制
相似问题
改变我的输出在C程序中的显示方式？
如何更改外键字段在django管理中的显示方式？
在gameState更改后显示赢/输图片(SFML扫雷程序)
如何更改Django显示验证过程中创建的错误消息的方式？
输出在特定的Android设备上以不同方式显示
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
