Libsass: Les modules CSS ne fonctionnent plus après la mise à jour vers node-sass 4.0.0

Créé le 12 déc. 2016 · 7Commentaires · Source: sass/libsass

Avant la mise à jour (node-sass 1.13.1), les éléments suivants fonctionnaient sans aucun problème :

entrée.sass

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

Maintenant j'obtiens l'erreur suivante :

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

informations sur la version :

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

Version NPM ( npm -v ) : 3.10.3
Version du nœud ( node -v ): 6.7.0
Processus de nœud ( node -p process.versions ):
{ http_parser : '2.7.0',
nœud : '6.7.0',
v8 : '5.1.281.83',
UV : '1.9.1',
zlib : '1.2.8',
sont : '1.10.1-DEV',
icu : '57.1',
module : '48',
openssl : '1.0.2j' }
Plate-forme de nœud ( node -p process.platform ): darwin
Architecture de nœud ( node -p process.arch ): x64
version nœud-sass ( node -p "require('node-sass').info" ):
nœud-sass 4.0.0 (encapsuleur) [JavaScript]
libsass 3.4.0 (compilateur Sass) [C/C++]
versions npm node-sass ( npm ls node-sass ): [email protected]

Source

delijah

Commentaire le plus utile

@delijah J'ai pu le faire fonctionner à nouveau après la mise à niveau en échappant au côlon, c'est-à-dire

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

mattfysh le 28 déc. 2016

👍7

Tous les 7 commentaires

Ce projet est une implémentation du langage Sass. Notre objectif est d'être 100% compatible avec Sass. Nous fermons ce problème puisque Ruby Sass produit la même sortie. À l'avenir, veuillez confirmer que la sortie de LibSass diffère de Ruby Sass avant d'ouvrir un problème.

Si vous souhaitez suggérer des fonctionnalités de bogues de fichiers dans le langage Sass, veuillez ouvrir un problème avec Sass - https://github.com/sass/sass

xzyfer le 13 déc. 2016

Il compilait avec LibSass à cause d'un bogue qui a été corrigé. Ce code n'est pas valide Sass et n'aurait jamais dû être compilé. Vous pouvez le confirmer en testant votre code avec 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.

Le message d'erreur Ruby Sass est bien meilleur que le nôtre et suggère une solution de contournement. Afin de modifier ce comportement, vous devez ouvrir une demande de fonctionnalité avec Ruby Sass

xzyfer le 13 déc. 2016

Il est à noter que la syntaxe du module CSS est valide avec le format scss

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

xzyfer le 13 déc. 2016

👍1

@xzyfer Savez-vous pourquoi :global n'est pas valide Sass ? C'est un sélecteur CSS valide et deviendra probablement plus courant à l'avenir dès que plus de personnes utiliseront le sélecteur :host lors de l'écriture de composants Web.

jhnns le 27 déc. 2016

👍2

@jhnns il y a quelques éléments différents en jeu ici. L'OP utilise l'ancienne syntaxe en retrait.

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

Dans cette syntaxe, les sélecteurs :foo ont une signification particulière. Cette signification est antérieure à l'inclusion des sélecteurs préfixés : dans CSS de près d'une décennie. Comme je l'ai dit plus haut, la modification de ce comportement n'est pas dans le cadre de LibSass et doit être traitée par l' équipe officielle de Sass .

D'autre part, la nouvelle syntaxe scss garantit (principalement) un super ensemble de CSS. Pour cette raison, les sélecteurs préfixés : fonctionnent comme prévu.

xzyfer le 28 déc. 2016

👍1

@delijah J'ai pu le faire fonctionner à nouveau après la mise à niveau en échappant au côlon, c'est-à-dire

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

mattfysh le 28 déc. 2016

👍7

@mattfysh Je peux le confirmer. L'utilisation d'un "\" résout le problème. Maintenant, mon sass-linter n'aime pas ça;) Je vais ouvrir un sujet pour ça.

delijah le 28 avr. 2017

Cette page vous a été utile?

0 / 5 - 0 notes