Libsass: CSS-Module funktionieren nach Update auf node-sass 4.0.0 nicht mehr

Erstellt am 12. Dez. 2016 · 7Kommentare · Quelle: sass/libsass

Vor dem Update (node-sass 1.13.1) hat folgendes ohne Probleme funktioniert:

Eingabe.sass

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

Jetzt bekomme ich folgenden Fehler:

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

Versions Information:

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

NPM-Version ( npm -v ): 3.10.3
Knotenversion ( node -v ): 6.7.0
Knotenprozess ( node -p process.versions ):
{ http_parser: '2.7.0',
Knoten: '6.7.0',
v8: '5.1.281.83',
uv: '1.9.1',
zlib: '1.2.8',
Bereich: '1.10.1-DEV',
icu: '57.1',
Module: '48',
openssl: '1.0.2j' }
Knotenplattform ( node -p process.platform ): darwin
Knotenarchitektur ( node -p process.arch ): x64
node-sass-Version ( node -p "require('node-sass').info" ):
node-sass 4.0.0 (Wrapper) [JavaScript]
libsass 3.4.0 (Sass-Compiler) [C/C++]
npm node-sass-Versionen ( npm ls node-sass ): [email protected]

Quelle

delijah

Hilfreichster Kommentar

@delijah Ich konnte das nach dem Upgrade wieder zum Laufen bringen, indem ich den Doppelpunkt maskierte, dh

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

mattfysh am 28. Dez. 2016

👍7

Alle 7 Kommentare

Dieses Projekt ist eine Implementierung der Sass-Sprache. Unser Ziel ist es, zu 100 % mit Sass kompatibel zu sein. Wir schließen dieses Thema, da Ruby Sass die gleiche Ausgabe erzeugt. Bitte bestätigen Sie in Zukunft, dass sich die Ausgabe von LibSass von der von Ruby Sass unterscheidet, bevor Sie ein Problem öffnen.

Wenn Sie Funktionen von Dateifehlern in der Sass-Sprache vorschlagen möchten, öffnen Sie bitte ein Problem mit Sass - https://github.com/sass/sass

xzyfer am 13. Dez. 2016

Es wurde wegen eines gepatchten Fehlers mit LibSass kompiliert. Dieser Code ist kein gültiger Sass und hätte niemals kompiliert werden dürfen. Sie können dies bestätigen, indem Sie Ihren Code mit Ruby Sass testen.

: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.

Die Fehlermeldung von Ruby Sass ist viel besser als unsere und schlägt eine Problemumgehung vor. Um dieses Verhalten zu ändern, müssten Sie eine Funktionsanfrage bei Ruby Sass öffnen

xzyfer am 13. Dez. 2016

Beachten Sie, dass die Syntax des CSS-Moduls im scss-Format gültig ist

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

xzyfer am 13. Dez. 2016

👍1

@xzyfer Weißt du, warum :global kein gültiger Sass ist? Es ist ein gültiger CSS-Selektor und wird wahrscheinlich in Zukunft häufiger vorkommen, sobald mehr Leute den :host -Selektor beim Schreiben von Webkomponenten verwenden.

jhnns am 27. Dez. 2016

👍2

@jhnns hier spielen ein paar verschiedene Elemente eine Rolle. Das OP verwendet die alte eingerückte Syntax.

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

In dieser Syntax haben :foo Selektoren eine besondere Bedeutung. Diese Bedeutung liegt fast ein Jahrzehnt vor der Aufnahme von Selektoren mit dem Präfix : in CSS. Wie ich oben sagte, liegt das Ändern dieses Verhaltens nicht im Bereich von LibSass und muss vom offiziellen Sass-Team angegangen werden.

Andererseits garantiert die neuere scss-Syntax (meistens) eine Übermenge von CSS. Aus diesem Grund funktionieren : vorangestellte Selektoren wie erwartet.

xzyfer am 28. Dez. 2016

👍1

@delijah Ich konnte das nach dem Upgrade wieder zum Laufen bringen, indem ich den Doppelpunkt maskierte, dh

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

mattfysh am 28. Dez. 2016

👍7

@mattfysh kann ich bestätigen. Die Verwendung eines "\" löst das Problem. Jetzt mag es mein Sass-Linter nicht ;) Ich werde dafür ein Thema eröffnen.

delijah am 28. Apr. 2017

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Libsass: CSS-Module funktionieren nach Update auf node-sass 4.0.0 nicht mehr

Hilfreichster Kommentar

Alle 7 Kommentare

Verwandte Themen