0

我有这个将 scss 转换为 css 文件的 gulp 任务。

import dartSass from "sass"
import gulpSass from "gulp-sass"
import groupCssMediaQueries from "gulp-group-css-media-queries"
import autoPrefixer from "gulp-autoprefixer"
import webpcss from "gulp-webpcss"
import GulpCleanCss from "gulp-clean-css"


const sass = gulpSass(dartSass);

export const scss = () => {
    return app.gulp.src(app.path.src.css, { sourcemaps: true })
    .pipe(app.plugins.plumber(
        app.plugins.notify.onError({
            title: "SCSS",
            message: "Error : <%= error.message %>" 
        })
    ))  
    .pipe(app.plugins.cached("css"))
        .pipe(app.plugins.newer(app.path.build.css))
        .pipe(app.plugins.replace(/@img\//g, "../img/"))

        .pipe(sass({
            outputStyle: "expanded"
        }))

        .pipe(
            groupCssMediaQueries()
        )
        .pipe(
            autoPrefixer({
                overrideBrowserslist: ["last 5 version"],
                cascade: true,
                grid: true
            })
        )
        .pipe(app.plugins.remember("scss"))
        .pipe(webpcss({
            webpClass: ".webp",
            noWebpClass: ".no-webp"
        }))
        .pipe(app.gulp.dest(app.path.build.css))
        .pipe(GulpCleanCss())
        .pipe(
            app.plugins.rename({
                extname: ".min.css"
            })
        )
        .pipe(app.gulp.dest(app.path.build.css))
        .pipe(app.plugins.browsersync.stream())
}

app这是所有任务的全局对象，所有路径和常用插件都被导入。我还有一个main.scss文件和其他一些scss文件。scss当我导入与main.scss位于同一目录中的文件时，我的任务工作正常main.scss，如下所示：

@import "./fonts.scss";

但是当我尝试导入main.scss文件时，该文件位于其他目录中，如下所示：

@import "./base/mixins.scss";

Gulp 在控制台中抛出错误：

gulp-notify：[错误运行通知程序]无法发送消息：未定义错误

另外奇怪的是我的任务中有一个水管工，但错误只在控制台中抛出。

PS 如果您需要，我可以附上我的所有文件，包括 gulpfile。并为我糟糕的英语感到抱歉。

4

0 回答 0