Question

我有一个sass文件： sitemap.scss

它仅包含以下内容（暂时）：

.hero {
    height: 600px;
    background: none;
}

我正在使用gulp-sass，到目前为止，我已经很好地编写了我的sass。

编译此文件时的输出错误如下：

Error in plugin 'gulp-sass'
Message:
    assets/styles/source/components/sub-pages/sitemap.scss
Error: Invalid CSS after ".hero {": expected "}", was "{"
        on line 1 of assets/styles/source/components/sub-pages/sitemap.scss
>> .hero { {
   -------^

Details:
    formatted: Error: Invalid CSS after ".hero {": expected "}", was "{"
        on line 1 of assets/styles/source/components/sub-pages/sitemap.scss
>> .hero { {
   -------^

    column: 8
    line: 1
    file: /Users/dvasquez/Sites/workspace/Development/branch3/site.com/assets/styles/source/components/sub-pages/sitemap.scss
    status: 1
    messageFormatted: assets/styles/source/components/sub-pages/sitemap.scss
Error: Invalid CSS after ".hero {": expected "}", was "{"
        on line 1 of assets/styles/source/components/sub-pages/sitemap.scss
>> .hero { {
   -------^

    messageOriginal: Invalid CSS after ".hero {": expected "}", was "{"
    relativePath: assets/styles/source/components/sub-pages/sitemap.scss

现在这里变得奇怪了。如果我采用相同的sass文件，并按如下方式编写：

.hero { height: 600px; background: none; }

它编译得很好。

我认为这可能是某种编码问题，因此我删除了该文件并创建了一个新文件。同样的问题。以前有人遇到过这样的事吗？我的项目中有很多其他sass文件，但没有一个表现出这种行为。

此外，除此之外，我还尝试导入一个包含该文件的4行版本的部分，并且工作得很好。

非常感谢任何想法。

Answer 1

如上文@rachel's comment所述，请尝试在gulp-sass配置中设置indentedSyntax: false。我有完全相同的错误，这对我有用！

"sass": {
  "indentedSyntax": false, //Set to false to allow standard SCSS syntax using braces.
  "includePaths": [
    "./node_modules/normalize.css"
  ]
}

Answer 2

Laravel混合

要扩展Grant K Norwood的答案，如果您使用Laravel混合，则希望将缩进样式作为第三个参数的属性传递进来，如下所示：

mix.sass('input.sass', 'output.css', {
    sassOptions: {
        indentedSyntax: false
    }
});

docs：https://laravel.com/docs/6.x/mix#sass

什么会导致sass文件因换行而中断编译？

2 个答案: