Saya pikir praktik terbaik adalah memiliki file .scss global, dengan semua gaya dasar (seperti warna primer, dll.).
Kemudian, untuk setiap Komponen React, Anda menulis modulnya sendiri, agar tetap bersih dan .css perlu mengimpor seminimal mungkin.

Menggunakan pendekatan ini, saya mendapatkan kesalahan aneh.

Saya memiliki file styles/global.scss dengan ini:

$primary-color: #6dd3d6;

body {
    margin: 0;
    padding: 0;
}

Sekarang saya memiliki file lain bernama NavBar.module.scss dengan konten ini:

@import "styles/global";

.nav {
    display: flex;
    padding: 20px;
    background: $primary-color;
}

File _app.js saya:

import React from 'react';
import '../styles/global.scss'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Dan file NavBar.js saya:

import React from 'react';
import styles from './NavBar.module.scss';

export default function NavBar() {
    return(
    <nav className={styles.nav}>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </nav>
    );

}

Ini memberi saya kesalahan berikut:

./components/NavBar.module.scss:3:1
Syntax error: Selector "body" is not pure (pure selectors must contain at least one local class or id)

  1 | $primary-color: #6dd3d6;
  2 | 
> 3 | body {
    |                ^
  4 |     margin: 0;
  5 |     padding: 0;
0
Leviathan 13 Juli 2020, 12:59

1 menjawab

Jawaban Terbaik

Anda tidak dapat menggunakan pemilih body dalam modul seperti yang tertulis dalam pesan kesalahan: "Pemilih "tubuh" tidak murni (pemilih murni harus berisi setidaknya satu kelas atau id lokal) ".

Buat file Sass lain yang hanya berisi variabel dan impor dalam modul / file Sass global.

Edit dari Penulis Pertanyaan untuk memberikan informasi tambahan:
Juga salah untuk mengimpor global.scss di salah satu kelas .module.scss, yang menyebabkan kesalahan. Ini adalah gaya global, tidak perlu mengimpor ulang.

2
Leviathan 13 Juli 2020, 17:28