Question

我正在尝试使用gulp-scss来转换scss文件当我运行任务时，它似乎没有获得进口。

gulpfile.js

gulp.src('./app/css/app.scss', {base: './'})
    .pipe(sass({includePaths:'./node_modules/foundation-sites/scss'}))
    .pipe(gulp.dest('./web'));

app.scss

/*my custom styles*/
@import 'my-custom-styles';

// Sass utilities
@import 'util/util';

// Global variables and styles
@import 'global';

// Components
@import 'grid/grid';
etc.....

app.css

/*my custom styles*/
body{background:black;}

我希望app.css充满基础代码。有什么想法吗？

编辑：即使我尝试添加错误处理，我也没有收到任何错误。的控制台

[00:52:07] Using gulpfile ~/dev/rise-client/gulpfile.js [00:52:07] Starting 'scss'... [00:52:07] Finished 'scss' after 9.28 ms

Answer 1

您的来源可能有错误，请尝试：

.pipe(sass(/* config */))
.on('error', function(err) { console.log(err); }))

Answer 2

看the files that you're importing它们似乎并不是自己设计任何元素。它们包含的所有内容都是变量以及@mixin和@function定义。除非您实际在自己的 app.scss 文件中引用这些文件，否则导入文件中的任何内容都不会在您编译的 app.css 中结束。

例如，如果您在 app.scss 中引用$warning-color，请执行以下操作：

@import 'util/util';
@import 'global';
@import 'grid/grid';

body {
  background:$warning-color;
}

你最终得到了一个编译好的 app.css ：

body {
  background: #ffae00;
}

所以你的gulpfile没什么问题。你的SCSS是错误的。

Answer 3

好的，所以我导入的基础不对。

您必须@import 'foundation';
不是所有的组件。：/

使用scss文件

@import 'foundation';

gulp-sass导入无声地失败

3 个答案: