在运行带有顺风和bulma css的gulp任务时漏掉分号错误
在运行带有顺风和bulma css的gulp任务时漏掉分号错误
提问于 2020-11-25 19:30:57
我是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官方文档中找到这些信息。
请帮我弄清楚我缺少的东西。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-11-29 19:01:41
经过一些搜索和研究，下面是我是如何修复它的。
通过在我的gulp任务中执行npm install gulp-sass和管道gulp-sass添加了npm install 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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65011540
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号