什么会导致 sass 文件由于换行而中断编译？答案

【问题标题】：What would cause a sass file to break compilation due to a line break?什么会导致 sass 文件由于换行而中断编译？
【发布时间】：2016-06-25 00:51:10
【问题描述】：

我有一个 sass 文件：站点地图.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 行版本的部分内容，效果也很好。

任何想法将不胜感激。

【问题讨论】：

您是否尝试过删除该行并重新输入（不是剪切/粘贴样式）？错误消息似乎表明该行中有两个{。您可以使用十六进制编辑器来检查任何不寻常的字符。
听起来你正在编译缩进的 SASS 而不是 SCSS。 SASS 不使用括号，而是使用缩进，因此当您包含括号时，它会添加第二个括号并引发错误。当您将其放在一行上时，它会将其识别为标准 CSS。检查你的 gulp 设置，看看你是否将 sass 缩进设置为 true。
Kicken，我已经删除了整个文件，但是是的，我已经通过删除该行并重写它进行了测试。同样的错误。雷切尔，谢谢你的建议，但我想如果它正在编译缩进的 SASS，那么我所有的其他 scss 文件都会大量失败。其他一切都编译得很好（我们说的是 50-100 个其他带有数百行代码的 scss 文件）。不过，我会在星期一尝试你的建议，以防万一。这真的很令人困惑。我以前从未遇到过此类问题。

标签： css sass gulp-sass libsass

【解决方案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"
  ]
}

【讨论】：

【解决方案2】：

Laravel 混合

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

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

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

【讨论】：