Libsass: 更新到 node-sass 4.0.0 后，CSS 模块不再工作

创建于 2016-12-12 · 7评论 · 资料来源: sass/libsass

在更新（node-sass 1.13.1）之前，以下工作没有任何问题：

输入.sass

:global
    .my-global-class-name
        background-color: red

现在我收到以下错误：

ERROR in ./~/css-loader?modules&importLoaders=2&camelCase&sourceMap!./~/postcss-loader?sourceMap=inline!./~/sass-loader?sourceMap!./app/styles/modules/resourceForm.sass
Module build failed:
        .my-global-class-name
       ^
      Illegal nesting: Only properties may be nested beneath properties.
      in .../app/styles/modules/resourceForm.sass (line 7, column 9)
 @ ./app/styles/modules/resourceForm.sass 4:14-254 13:2-17:4 14:20-260

版本信息：

$ node-sass --version
node-sass   4.0.0   (Wrapper)   [JavaScript]
libsass     3.4.0   (Sass Compiler) [C/C++]

NPM 版本（ npm -v ）：3.10.3
节点版本（ node -v ）：6.7.0
节点进程（ node -p process.versions ）：
{ http_parser: '2.7.0',
节点：'6.7.0'，
v8: '5.1.281.83',
紫外线：'1.9.1'，
zlib: '1.2.8',
战神：'1.10.1-DEV'，
重症监护室：'57.1'，
模块：'48'，
openssl: '1.0.2j' }
节点平台（ node -p process.platform ）：darwin
节点架构（ node -p process.arch ）：x64
节点 sass 版本（ node -p "require('node-sass').info" ）：
node-sass 4.0.0（包装器）[JavaScript]
libsass 3.4.0（Sass 编译器）[C/C++]
npm node-sass 版本 ( npm ls node-sass ): [email protected]

资料来源

delijah

最有用的评论

@delijah我通过转义冒号升级后能够再次工作，即

\:global
    .my-global-class-name
        background-color: red

mattfysh 于 2016-12-28

👍7

所有7条评论

这个项目是 Sass 语言的一个实现。我们的目标是与 Sass 100% 兼容。我们正在关闭这个问题，因为 Ruby Sass 产生了相同的输出。将来请在打开问题之前确认 LibSass 的输出与 Ruby Sass 不同。

如果您想建议 Sass 语言中文件错误的功能，请使用 Sass 打开一个问题 - https://github.com/sass/sass

xzyfer 于 2016-12-13

由于已修补的错误，它正在使用 LibSass 进行编译。这段代码不是有效的 Sass，不应该编译。您可以通过使用 Ruby Sass 测试您的代码来确认这一点。

:global
    .my-global-class-name
        background-color: red

Error: Properties are only allowed within rules, directives, mixin includes, or other properties.
       If ":global" should be a selector, use "\:global" instead.
        on line 1 of test.sass
  Use --trace for backtrace.

Ruby Sass 错误消息比我们的要好得多，并建议解决方法。为了改变这种行为，您需要使用Ruby Sass打开一个功能请求

xzyfer 于 2016-12-13

注意 CSS 模块语法在 scss 格式中有效

:global {
    .my-global-class-name {
        background-color: red
    }
}

xzyfer 于 2016-12-13

👍1

@xzyfer你知道为什么:global不是有效的 Sass 吗？它是一个有效的 CSS 选择器，并且在未来有更多的人在编写 Web 组件时使用:host选择器时，它可能会变得更加普遍。

jhnns 于 2016-12-27

👍2

@jhnns这里有几个不同的元素。 OP 使用旧的缩进语法。

:global
    .my-global-class-name
        background-color: red

在该语法中， :foo选择器具有特殊含义。这比在 CSS 中包含:前缀选择器早了将近十年。正如我上面所说，改变这种行为不在 LibSass 的范围内，需要由官方 Sass 团队解决。

另一方面，较新的 scss 语法保证（大部分）是 CSS 的超集。由于这个原因， :前缀选择器按预期工作。

xzyfer 于 2016-12-28

👍1

@delijah我通过转义冒号升级后能够再次工作，即

\:global
    .my-global-class-name
        background-color: red

mattfysh 于 2016-12-28

👍7

@mattfysh我可以确认这一点。使用“\”可以解决问题。现在我的 sass-linter 不喜欢它；）我会为此打开一个问题。

delijah 于 2017-04-28

此页面是否有帮助？

0 / 5 - 0 等级

Libsass: 更新到 node-sass 4.0.0 后，CSS 模块不再工作

最有用的评论

所有7条评论

相关问题