Gulp-sass 无法编译 scss 文件
Posted
技术标签:
【中文标题】Gulp-sass 无法编译 scss 文件【英文标题】:Gulp-sass fails to compile scss file 【发布时间】:2014-01-24 07:56:38 【问题描述】:我正在使用 Gulp 将我的 sass 编译成 css。一个简单的任务编译_/sass
目录下的style.scss
文件,并将输出保存到项目的根目录下。 style.scss
仅用于导入_/sass
目录下的其他文件。
当我从命令行 ($ gulp
) 运行默认任务时,我收到一个 sass 无法编译的错误。它全部包含在下面。我已从包含的文件中删除所有内容并再次运行该任务。我仍然收到相同的错误(我在网上阅读的内容表明这可能会测试编码问题。我不完全了解编码以及这可能会如何破坏我的场景)。
我还从命令行$ sass _/sass/style.scss style.css
运行,它与包含文件中的内容完美配合。这表明 gulp sass 插件本身存在问题。
来自 gulpfile.js 的相关 sn-ps:
var gulp = require('gulp');
var sass = require('gulp-sass');
// Compile sass files
gulp.task('sass', function ()
gulp.src('./_/sass/style.scss')
.pipe(sass())
.pipe(gulp.dest('./'));
);
// The default task (called when you run `gulp`)
gulp.task('default', function()
gulp.run('sass');
// Watch files and run tasks if they change
gulp.watch(['./_/sass/style.scss'], function()
gulp.run('sass');
)
);
style.scss的全部内容:
/* RESET */
@import '_/sass/reset';
/* TYPOGRAPHY */
@import '_/sass/typography';
/* MOBILE */
@import '_/sass/mobile';
/* MAIN */
@import '_/sass/main';
目录结构:
├── _
│ ├── inc
│ │ ├── stuff
│ ├── js
│ │ ├── otherstuff.js
│ └── sass
│ ├── main.scss
│ ├── mobile.scss
│ ├── print.scss
│ ├── reset.scss
│ ├── style.scss
│ └── typography.scss
├── gulpfile.js
└── style.css
终端吐出:
[gulp] Using file /Users/jeshuamaxey/project/dir/path/gulpfile.js
[gulp] Working directory changed to /Users/jeshuamaxey/project/dir/path/html5reset
[gulp] Running 'default'...
[gulp] Running 'sass'...
[gulp] Finished 'sass' in 3.18 ms
[gulp] Finished 'default' in 8.09 ms
stream.js:94
throw er; // Unhandled stream error in pipe.
^
source string:11: error: file to import not found or unreadable: 'reset'
【问题讨论】:
已编辑以包含 style.scss 的全部内容 【参考方案1】:如果您在 Windows 中使用 Sublime 文本,您应该在 Sunlime 配置中添加规则。只需在 Preferences>Settings-User
中添加"atomic_save" : true
https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes#partials-sporadically-not-found
【讨论】:
【参考方案2】:保持导入不变,只需将 gulp sass 模块中的 includePaths
选项作为参数传递:
gulp.src('./_/sass/style.scss')
.pipe(sass( includePaths : ['_/sass/'] ))
.pipe(gulp.dest('./'));
...应该为你做。
根据https://github.com/dlmanning/gulp-sass/issues/1
【讨论】:
谢谢。这解决了我遇到的特定问题。遗憾的是我的配置仍然没有按预期工作,但我会坚持下去。我非常喜欢 Gulp 的外观 这是唯一对我有用的东西。谢谢!【参考方案3】:为此,您需要从相同的 gulpfile.js 文件夹开始
@import '_/sass/reset'
我认为 Gulp 会读取导入并找到 gulpfile.js 所在的文件
【讨论】:
Gulp-sass 刚刚更新了新功能,允许我们包含 @import npmjs.org/package/gulp-sass 的路径以上是关于Gulp-sass 无法编译 scss 文件的主要内容,如果未能解决你的问题,请参考以下文章