0

我有一个 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 行版本的部分内容，并且效果也很好。

任何想法将不胜感激。

4

2 回答 2

2

正如上面@rachel 的评论中提到的，尝试indentedSyntax: false在您的 gulp-sass 配置中进行设置。我有完全相同的错误，这对我有用！

"sass": {
  "indentedSyntax": false, //Set to false to allow standard SCSS syntax using braces.
  "includePaths": [
    "./node_modules/normalize.css"
  ]
}
于 2016-09-29T16:25:22.263 回答
0

Laravel 混合

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

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

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

于 2020-01-16T04:12:36.453 回答