使用tailwind和bulma css运行gulp任务时出现分号错误

我是新来的

狼吞虎咽

任务。我现在正在练习。通过谷歌搜索，我学会了写一些任务。我在我的项目中使用了

tailwind

和

bulma

css

这是我的设置

package.json

：

" 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.

{
“依赖性”：{
“吞咽”：“^4.0.2”，
“大口喝干净css”：“^4.3.0”，
“吞咽邮政编码”：“^9.0.0”，
“狼吞虎咽”：“^3.0.0”，
“gulp sourcemaps”：“^3.0.0”，
“预处理”：“^4.0.0”
},
“依赖项”：{
“@fortawesome/fontawesome免费”：“^5.15.1”，
“自动刷新器”：“^9.8.6”，
“bulma”：“^0.9.1”，
“邮政编码”：“^7.0.35”，
“tailwindcss”：“npm:@tailwindcss/postss7 compat@^2.0.1”
}
}

大口大口喝

任务：

" 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.

const gulp=require（'gulp'）；
gulp.task（'css:dev'，（）=>{
const postsss=需要（'gulp-postsss'）；
return gulp.src（'./Styles/site.css'）
.管道（邮政编码）([
要求（'precss'），
require（'tailwindcss'），
需要（'autoprefixer'）
]))
.管道（大口目的地（'./wwwroot/css/'）；
});

site.css:

" 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.

@顺风基地；
@顺风组件；
@顺风公用事业；
@导入“../node_modules/@fortawesome/fontawesome free/css/all.css”；
@导入“../node_modules/bulma/css/bulma.css”；-->这很有效

当我运行我的gulp任务

gulp css:dev

时，这可以正常工作，但当我删除整个

bulma.css

并加载单独的组件时失败

site.css:

" 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.

@顺风基地；
@顺风组件；
@顺风公用事业；
@导入“../node_modules/@fortawesome/fontawesome free/css/all.css”；
@导入“../node_modules/bulma/sass/utilities/_all.sass”；
@导入“../node_modules/bulma/sass/components/menu.sass”；-->这失败了

错误消息：

" 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:

" 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.

根据评论中的建议，我包括以下进口产品

@import'../node_modules/bulma/sass/utilities/mixins.sass'；
@导入“../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

官方文件中找到这些

---

请帮助我弥补我的不足。

经过一些谷歌搜索和研究，下面是我如何修复它的

在我的gulp任务中，通过执行npm安装gulp sass和管道

gulp sass

添加了

gulp sass

这是我最后的工作设置

package.json

：

{
“依赖性”：{
“吞咽”：“^4.0.2”，
“大口大口大口喝”：“^4.1.0”，新增//>
“大口喝干净css”：“^4.3.0”，
“吞咽邮政编码”：“^9.0.0”，
“狼吞虎咽”：“^3.0.0”，
“gulp sourcemaps”：“^3.0.0”，
“预处理”：“^4.0.0”
},
“依赖项”：{
“@fortawesome/fontawesome免费”：“^5.15.1”，
“自动刷新器”：“^9.8.6”，
“bulma”：“^0.9.1”，
“节点sass”：“^5.0.0”，
“邮政编码”：“^7.0.35”，
“tailwindcss”：“npm:@tailwindcss/postss7 compat@^2.0.1”
}
}

gulp

任务：

const gulp=require（'gulp'）；
gulp.task（'css:dev'，（）=>{
const postsss=需要（'gulp-postsss'）；
const sass=require（'gulp-sass'）；//-->新添加的
return gulp.src（'./Styles/site.css'）
.pipe（sass（）.on（'error'，sass.logError））/>新添加
.管道（邮政编码）([
要求（'precss'），
require（'tailwindcss'），
需要（'autoprefixer'）
]))
.管道（大口目的地（'./wwwroot/css/'）；
});

site.css：

@import'../node_modules/@fortawesome/fontawesome free/css/all.css'；
@导入“../node_modules/bulma/sass/utilities/_all.sass”；
@导入“../node_modules/bulma/sass/helpers/typography.sass”；
@导入“../node_modules/bulma/sass/layout/hero.sass”；
@导入“../node_modules/bulma/sass/elements/title.sass”；
@导入“../node_modules/bulma/sass/components/dropdown.sass”；
@导入“../node_modules/bulma/sass/components/menu.sass”；
@导入“../node_modules/bulma/sass/components/card.sass”；
@顺风基地；
@顺风组件；
@顺风公用事业；

我猜它失败了，因为

menu.sass

正在尝试导入

。/utilities/mixins

，所以它抛出了一个错误-这不一定是问题所在。即使

\u all

加载了

mixins

，

菜单.scss

也找不到该文件。我有点困惑。你能解释一下吗？这个错误可能不是缺少的分号。如果您查看

菜单.sass

文件，您将看到它正在尝试导入

。/utilities/mixins

，但是，您没有包含它，因此它抛出了一个错误。添加该文件会导致另一个错误。是否有需要导入哪些内容和所有内容的文档？我在

bulma.io中找不到任何东西

还有什么错误？我不确定所有的进口产品，因为我不熟悉布尔马。