Libsass: CSS-Modul tidak berfungsi lagi setelah pembaruan ke node-sass 4.0.0

Dibuat pada 12 Des 2016  ·  7Komentar  ·  Sumber: sass/libsass

Sebelum memperbarui (node-sass 1.13.1), berikut ini berfungsi tanpa masalah:

masukan.sass

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

Sekarang saya mendapatkan kesalahan berikut:

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

informasi versi:

$ node-sass --version
node-sass   4.0.0   (Wrapper)   [JavaScript]
libsass     3.4.0   (Sass Compiler) [C/C++]
  • Versi NPM ( npm -v ): 3.10.3
  • Versi simpul ( node -v ): 6.7.0
  • Proses Node ( node -p process.versions ):
    { http_parser: '2.7.0',
    simpul: '6.7.0',
    v8: '5.1.281.83',
    uv: '1.9.1',
    zlib: '1.2.8',
    ares: '1.10.1-DEV',
    icu: '57.1',
    modul: '48',
    openssl: '1.0.2j' }
  • Platform Node ( node -p process.platform ): darwin
  • Arsitektur simpul ( node -p process.arch ): x64
  • versi node-sass ( node -p "require('node-sass').info" ):
    node-sass 4.0.0 (Pembungkus) [JavaScript]
    libsass 3.4.0 (Sass Compiler) [C/C++]
  • npm versi node-sass ( npm ls node-sass ): [email protected]
picture delijah

Komentar yang paling membantu

@delijah saya bisa mendapatkan ini bekerja lagi setelah memutakhirkan dengan keluar dari titik dua yaitu

\:global
    .my-global-class-name
        background-color: red
picture mattfysh pada 28 Des 2016
👍7

Semua 7 komentar

Proyek ini merupakan implementasi dari bahasa Sass. Tujuan kami adalah menjadi 100% kompatibel dengan Sass. Kami menutup masalah ini karena Ruby Sass menghasilkan output yang sama. Di masa mendatang, harap konfirmasikan bahwa keluaran LibSass berbeda dari Ruby Sass sebelum membuka masalah.

Jika Anda ingin menyarankan fitur bug file dalam bahasa Sass, silakan buka masalah dengan Sass - https://github.com/sass/sass

xzyfer picture xzyfer pada 13 Des 2016

Itu dikompilasi dengan LibSass karena bug yang telah ditambal. Kode ini bukan Sass yang valid dan seharusnya tidak pernah dikompilasi. Anda dapat mengkonfirmasi ini dengan menguji kode Anda dengan 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.

Pesan kesalahan Ruby Sass jauh lebih baik daripada pesan kami dan menyarankan Anda untuk mengatasinya. Untuk mengubah perilaku ini, Anda perlu membuka permintaan fitur dengan Ruby Sass

xzyfer picture xzyfer pada 13 Des 2016

Perhatikan bahwa sintaks modul CSS valid dengan format scss

:global {
    .my-global-class-name {
        background-color: red
    }
}
xzyfer picture xzyfer pada 13 Des 2016
👍1

@xzyfer Tahukah Anda mengapa :global tidak valid Sass? Ini adalah pemilih CSS yang valid dan mungkin akan menjadi lebih umum di masa mendatang segera setelah lebih banyak orang menggunakan pemilih :host saat menulis komponen web.

jhnns picture jhnns pada 27 Des 2016
👍2

@jhnns ada beberapa elemen berbeda yang dimainkan di sini. OP menggunakan sintaks indentasi lama.

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

Dalam sintaks itu, penyeleksi :foo memiliki arti khusus. Makna ini mendahului penyertaan selektor awalan : dalam CSS hampir satu dekade. Seperti yang saya katakan di atas, mengubah perilaku ini tidak termasuk dalam lingkup LibSass dan perlu ditangani oleh tim Sass resmi .

Di sisi lain sintaks scss yang lebih baru menjamin (kebanyakan) menjadi set super CSS. Untuk alasan ini penyeleksi awalan : bekerja seperti yang diharapkan.

xzyfer picture xzyfer pada 28 Des 2016
👍1

@delijah saya bisa mendapatkan ini bekerja lagi setelah memutakhirkan dengan keluar dari titik dua yaitu

\:global
    .my-global-class-name
        background-color: red
mattfysh picture mattfysh pada 28 Des 2016
👍7

@mattfysh saya dapat mengkonfirmasi ini. Menggunakan "\" memecahkan masalah. Sekarang sass-linter saya tidak menyukainya;) Saya akan membuka masalah untuk itu.

delijah picture delijah pada 28 Apr 2017
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

xzyfer picture xzyfer  ·  9Komentar
luiscla27 picture luiscla27  ·  10Komentar
sgbeal picture sgbeal  ·  13Komentar
c0d3xpl0it picture c0d3xpl0it  ·  4Komentar
JohnMica picture JohnMica  ·  3Komentar