当运行具有 tailwind 和 bulma css 的 gulp 任务时缺少分号错误

Question

我是 gulp 任务的新手。我现在正在练习。经过一番谷歌搜索后，我学会了编写一些任务。我在我的项目中使用 tailwind 和 bulma css。

这是我的设置。

package.json:

{
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-postcss": "^9.0.0",
    "gulp-purgecss": "^3.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "precss": "^4.0.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "autoprefixer": "^9.8.6",
    "bulma": "^0.9.1",
    "postcss": "^7.0.35",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"
  }
}

gulp 任务：

const gulp = require('gulp');

gulp.task('css:dev', () => {
    const postcss = require('gulp-postcss');

    return gulp.src('./Styles/site.css')
        .pipe(postcss([
            require('precss'),
            require('tailwindcss'),
            require('autoprefixer')
        ]))
        .pipe(gulp.dest('./wwwroot/css/'));
});

site.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
@import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
@import '../node_modules/bulma/css/bulma.css'; --> This works

这在我运行我的 gulp 任务 gulp css:dev 时工作正常，但当我删除整个 bulma.css 并加载单独的组件时失败。

site.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
@import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
@import '../node_modules/bulma/sass/utilities/_all.sass';
@import '../node_modules/bulma/sass/components/menu.sass'; --> This fails

错误信息：

" css:dev
[00:49:18] Using gulpfile ~\source\repos\BulmaTailwind\BulmaTailwind\Gulpfile.js
[00:49:18] Starting 'css:dev'...
[00:49:19] 'css:dev' errored after 1.53 s
[00:49:19] CssSyntaxError in plugin "gulp-postcss"
Message:
    precss: C:\Users\xxxx\source\repos\BulmaTailwind\BulmaTailwind\node_modules\bulma\sass\components\menu.sass:1:25: Missed semicolon
> 1 | $menu-item-color: $text !default
    |                         ^
  2 | $menu-item-radius: $radius-small !default
  3 | $menu-item-hover-color: $text-strong !default
Process terminated with code 1.

编辑-1:

根据评论中的建议，我包含了以下导入，

@import '../node_modules/bulma/sass/utilities/mixins.sass';
@import '../node_modules/bulma/sass/components/menu.sass';

最后我遇到了新的错误。

[23:21:34] Starting 'css:dev'...
[23:21:36] 'css:dev' errored after 1.53 s
[23:21:36] CssSyntaxError in plugin "gulp-postcss"
Message:
    precss: C:\Users\xxxx\source\repos\BulmaTailwind\BulmaTailwind\node_modules\bulma\sass\utilities\mixins.sass:12:25: Unknown word
  10 |   position: absolute
  11 |   @if $height != 0
> 12 |     left: calc(50% - (#{$width} / 2))
     |                         ^
  13 |     top: calc(50% - (#{$height} / 2))
  14 |   @else
Process terminated with code 1.

我知道我缺少一些导入。但现在可以从 bulma 官方文档中找到那些。

请协助解决我遗漏的问题。

Answer 1

经过一些谷歌搜索和研究，我是这样修复它的。

通过在我的 gulp 任务中执行 npm install gulp-sass 和管道 gulp-sass 添加 gulp-sass。

这是我的最终工作设置，

package.json:

{
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^4.1.0", // --> newly added
    "gulp-clean-css": "^4.3.0",
    "gulp-postcss": "^9.0.0",
    "gulp-purgecss": "^3.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "precss": "^4.0.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "autoprefixer": "^9.8.6",
    "bulma": "^0.9.1",
    "node-sass": "^5.0.0",
    "postcss": "^7.0.35",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"
  }
}

gulp 任务：

const gulp = require('gulp');

gulp.task('css:dev', () => {
    const postcss = require('gulp-postcss');
    const sass = require('gulp-sass'); // --> newly added

    return gulp.src('./Styles/site.css')
        .pipe(sass().on('error', sass.logError)) // --> newly added
        .pipe(postcss([
            require('precss'),
            require('tailwindcss'),
            require('autoprefixer')
        ]))
        .pipe(gulp.dest('./wwwroot/css/'));
});

site.css:

@import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
@import '../node_modules/bulma/sass/utilities/_all.sass';
@import '../node_modules/bulma/sass/helpers/typography.sass';
@import '../node_modules/bulma/sass/layout/hero.sass';
@import '../node_modules/bulma/sass/elements/title.sass';
@import '../node_modules/bulma/sass/components/dropdown.sass';
@import '../node_modules/bulma/sass/components/menu.sass';
@import '../node_modules/bulma/sass/components/card.sass';
@tailwind base;
@tailwind components;
@tailwind utilities;

当 运行 具有 tailwind 和 bulma css 的 gulp 任务时缺少分号错误

Missed semicolon error when running a gulp task with tailwind and bulma css

css

gulp

bulma

当运行具有 tailwind 和 bulma css 的 gulp 任务时缺少分号错误