如何将scss转换成css文件

Posted 2023-05-06

如：在D盘建立一个SASS文件夹，文件夹下有一个style.scss文件（scss，sass都行。sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。scss对代码的要求没那么高。）用下面的方法可以将sass或者scss转换为css文件。
首先输出 D: 代表找到D盘 ；
然后输出cd sass 代表找到sass文件夹，其中cd是一定要的；
最后输出 sass>sass --watch style.scss:style.css 在sass文件夹下将style.scss转换为style.css 。sass --watch代表一直监听着style.scss 只要在编辑器上更新了scss就会自动更新style.css 。 参考技术A 最省事的办法是下载个叫Koala的软件，用这个软件转就行了。

Gulp 3 到 Gulp 4：如何观看 scss 并将其缩小/编译成 css？

【中文标题】Gulp 3 到 Gulp 4：如何观看 scss 并将其缩小/编译成 css？

【英文标题】：Gulp 3 to Gulp 4: How to watch scss and minify/compile it into css?

【发布时间】：2019-05-23 16:58:14

【问题描述】：

在 Gulp 3 中，当检测到更改时，使用以下代码会将 scss 放入 css。它会从旧的 .scss 文件中生成新的缩小文件并将它们放入 css 文件夹中。

//=======gulpfile.js=======
//dependencies
var gulp        = require('gulp');
var sass        = require('gulp-sass');
var minifyCCS   = require('gulp-clean-css');
var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');
var changed     = require('gulp-changed');

//Roots
var SCSS_SRC    = './public/scss/*.scss';
var SCSS_DEST   = './public/css';

//Compiling
gulp.task('compile_scss', function()
    return gulp.src(SCSS_SRC)
        .pipe(sass())
        .pipe(minifyCSS())
        .pipe(rename(suffix: '.min'))
        .pipe(changed(SCSS_DEST))
        .pipe(gulp.dest(SCSS_DEST));
);

//Detect changes in SCSS
gulp.task('watch_scss', function()
    gulp.watch(SCSS_SRC, ['compile_scss']);
);

//Run
gulp.task('default', ['watch_scss']);

但是，Gulp 4 完全改变了函数处理，我还没有找到一个很好的例子来说明如何简单地观察 scss 并将其放入缩小的 css 中。我已经阅读了有关 gulp.series 和 gulp.parallel 的信息，但我认为这些东西都不是我想要的。上面的代码在 Gulp 3 中使用，在 Gulp 4 中不再工作。不是运行gulp watch_css，而是 cmd 向我抛出这样的错误：

assert.js:350 抛出错误； ^

AssertionError [ERR_ASSERTION]：必须指定任务函数 在 Gulp.set [as _setTask] (D:\say-my-name-RG\saymyname\node_modules\undertaker\lib\set-task.js:10:3) 在 Gulp.task (D:\say-my-name-RG\saymyname\node_modules\undertaker\lib\task.js:13:8) 在对象。 (D:\say-my-name-RG\saymyname\gulpfile.js:29:6) 在 Module._compile (internal/modules/cjs/loader.js:689:30) 在 Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) 在 Module.load (internal/modules/cjs/loader.js:599:32) 在 tryModuleLoad (internal/modules/cjs/loader.js:538:12) 在 Function.Module._load (internal/modules/cjs/loader.js:530:3) 在 Module.require (internal/modules/cjs/loader.js:637:17) 在需要（内部/模块/cjs/helpers.js:22:18）

这一切都在 localhost 节点服务器上，使用 react。我曾尝试寻找 gulp.set 函数，但我没有找到任何类似的东西。有人说回到 Gulp 3 是最简单的选择，但我有点想使用最新的软件。

还在 cmd 中运行 gulp compile_scss，所以没有 gulp.watch，会出现与上图相同的错误。

【参考方案1】：

你确实需要使用 gulp.series：

//Detect changes in SCSS
gulp.task('watch_scss', function()
    gulp.watch(SCSS_SRC, gulp.series('compile_scss'));
);

//Run
gulp.task('default', gulp.series('watch_scss'));

你有一个错字：

var minifyCCS   = require('gulp-clean-css');

改为：

var minifyCSS   = require('gulp-clean-css');

Migrating to gulp4 是一个很好的参考。

【讨论】：

非常感谢。我确实必须使用 .series 之一。我现在也明白为什么了。也感谢您的错字，我在我的 cmd 中也遇到了它：p 再次感谢