CSS Gulp-sass 无法编译 scss 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20957998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gulp-sass fails to compile scss file
提问by Jeshua
I'm using Gulp to compile my sass into css. A simple task compiles the style.scssfile in the _/sassdirectory and saves the output into the root of the project. style.scssis used merely to import other files in the _/sassdirectory.
我正在使用 Gulp 将我的 sass 编译成 css。一个简单的任务编译style.scss目录中的_/sass文件并将输出保存到项目的根目录中。style.scss仅用于导入目录中的其他文件_/sass。
When I run the default task from the command line ($ gulp) I get an error that the sass can't compile. It is included below in full. I have removed all content from the included files and run the task again. I still receive the same error (something I read online suggested this might test for an encoding issue. I don't fully understand encoding and how that might break things in my scenario).
当我从命令行 ( $ gulp)运行默认任务时，出现 sass 无法编译的错误。它完整地包含在下面。我已经从包含的文件中删除了所有内容并再次运行该任务。我仍然收到相同的错误（我在网上阅读的内容表明这可能会测试编码问题。我不完全了解编码以及这可能会如何破坏我的场景）。
I've also run from the command line $ sass _/sass/style.scss style.csswhich works perfectly with content in the included files. This suggests to me a problem with the gulp sass plugin itself.
我还从命令行运行，该命令行$ sass _/sass/style.scss style.css与包含文件中的内容完美配合。这向我表明 gulp sass 插件本身存在问题。
The relevant snippets from gulpfile.js:
gulpfile.js 中的相关片段：
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');
})
});
The full contents of style.scss:
style.scss 的全部内容：
/* RESET */
@import '_/sass/reset';
/* TYPOGRAPHY */
@import '_/sass/typography';
/* MOBILE */
@import '_/sass/mobile';
/* MAIN */
@import '_/sass/main';
The directory structure:
目录结构：
├── _
│?? ├── inc
│?? │?? ├── stuff
│?? ├── js
│?? │?? ├── otherstuff.js
│?? └── sass
│?? ├── main.scss
│?? ├── mobile.scss
│?? ├── print.scss
│?? ├── reset.scss
│?? ├── style.scss
│?? └── typography.scss
├── gulpfile.js
└── style.css
Terminal spits out:
终端吐出：
[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'
回答by Dog
Keep your imports as is, just pass the includePathsoption in your gulp sass module as an argument:
保持导入includePaths不变，只需将gulp sass 模块中的选项作为参数传递：
gulp.src('./_/sass/style.scss')
.pipe(sass({ includePaths : ['_/sass/'] }))
.pipe(gulp.dest('./'));
...should do it for you.
...应该为你做。
回答by max li
For this you need to do start with same gulpfile.js folder
为此，您需要从相同的 gulpfile.js 文件夹开始
@import '_/sass/reset'
I think the Gulp reads the import and find the file from where gulpfile.js are located
我认为 Gulp 读取导入并从 gulpfile.js 所在的位置找到文件
回答by Alexander Shchegol
If you use Sublime text with Windows, you should add rules in Sunlime config. Just add "atomic_save" : truein Preferences>Settings-User
如果你在 Windows 中使用 Sublime 文本，你应该在 Sunlime 配置中添加规则。只需添加"atomic_save" : true首选项>设置-用户
