Libsass: Os módulos CSS não funcionam mais após a atualização para o node-sass 4.0.0
Antes de atualizar (node-sass 1.13.1), o seguinte funcionou sem problemas:
input.sass
:global
.my-global-class-name
background-color: red
Agora recebo o seguinte erro:
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
informação da versão:
$ node-sass --version
node-sass 4.0.0 (Wrapper) [JavaScript]
libsass 3.4.0 (Sass Compiler) [C/C++]
- Versão NPM (
npm -v): 3.10.3 - Versão do nó (
node -v): 6.7.0 - Processo do nó (
node -p process.versions):
{ http_parser: '2.7.0',
nó: '6.7.0',
v8: '5.1.281.83',
uv: '1.9.1',
zlib: '1.2.8',
ares: '1.10.1-DEV',
icu: '57.1',
módulos: '48',
openssl: '1.0.2j' } - Plataforma de nós (
node -p process.platform): darwin - Arquitetura do nó (
node -p process.arch): x64 - versão node-sass (
node -p "require('node-sass').info"):
node-sass 4.0.0 (Wrapper) [JavaScript]
libsass 3.4.0 (Compilador Sass) [C/C++] - versões do npm node-sass (
npm ls node-sass): [email protected]
delijah
Todos 7 comentários
Este projeto é uma implementação da linguagem Sass. Nosso objetivo é ser 100% compatível com Sass. Estamos encerrando este problema, pois Ruby Sass produz a mesma saída. No futuro, confirme se a saída do LibSass é diferente do Ruby Sass antes de abrir um problema.
Se você deseja sugerir recursos de bugs de arquivos na linguagem Sass, abra um problema com o Sass - https://github.com/sass/sass
xzyfer
em 13 dez. 2016
Ele estava compilando com LibSass por causa de um bug que foi corrigido. Este código não é Sass válido e nunca deveria ter sido compilado. Você pode confirmar isso testando seu código com 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.
A mensagem de erro do Ruby Sass é muito melhor que a nossa e sugere uma solução alternativa. Para alterar esse comportamento, você precisa abrir uma solicitação de recurso com Ruby Sass
xzyfer
em 13 dez. 2016
Observe que a sintaxe do módulo CSS é válida com o formato scss
:global {
.my-global-class-name {
background-color: red
}
}
@xzyfer Você sabe por que :global não é válido Sass? É um seletor CSS válido e provavelmente se tornará mais comum no futuro assim que mais pessoas estiverem usando o seletor :host ao escrever componentes web.
jhnns
em 27 dez. 2016
@jhnns existem alguns elementos diferentes em jogo aqui. O OP está usando a antiga sintaxe recuada.
:global
.my-global-class-name
background-color: red
Nessa sintaxe, os seletores :foo têm um significado especial. Este significado antecede a inclusão de seletores prefixados : em CSS em quase uma década. Como eu disse acima, mudar esse comportamento não está dentro do escopo do LibSass e precisa ser tratado pela equipe oficial do Sass .
Por outro lado, a sintaxe scss mais recente garante (principalmente) ser um superconjunto de CSS. Por esta razão, os seletores prefixados : funcionam como esperado.
xzyfer
em 28 dez. 2016
@delijah Consegui fazer isso funcionar novamente após a atualização, escapando dos dois pontos, ou seja
\:global
.my-global-class-name
background-color: red
mattfysh
em 28 dez. 2016
@mattfysh posso confirmar isso. Usar um "\" resolve o problema. Agora meu sass-linter não gosta ;) Vou abrir um problema para isso.
delijah
em 28 abr. 2017
Questões relacionadas
luiscla27
·
10Comentários
nex3
·
9Comentários
bertusgroenewegen
·
6Comentários
catamphetamine
·
7Comentários
xzyfer
·
9Comentários
Comentários muito úteis
@delijah Consegui fazer isso funcionar novamente após a atualização, escapando dos dois pontos, ou seja