Использование переменных из глобальной таблицы стилей sass внутри модуля sass - PullRequest
Новая
       28

Использование переменных из глобальной таблицы стилей sass внутри модуля sass

0 голосов
/ 13 июля 2020

Я думаю, что лучше всего иметь глобальный файл .scss со всеми базовыми c стилями (например, основным цветом и c.). Затем для каждого компонента React вы пишете собственный модуль, чтобы он оставался чистым и .css, необходимое для импорта, было минимальным.

Однако, используя этот подход, я получаю странную ошибку.

У меня есть файл styles/global.scss с этим: 

$primary-color: #6dd3d6;

body {
    margin: 0;
    padding: 0;
}

теперь у меня есть другой файл с именем NavBar.module.scss с таким содержимым: 

@import "styles/global";

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

Мой _app.js файл: 

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

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

и мой NavBar.js файл: 

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>
    );

}

Это дает мне следующую ошибку: 

./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;

1 Ответ

1 голос
/ 13 июля 2020

Вы не можете использовать селектор body в модуле, как говорится в сообщении об ошибке: «« Тело »селектора не является чистым (чистые селекторы должны содержать хотя бы один локальный класс или идентификатор)".

Создайте еще один файл Sass, содержащий только переменные, и импортируйте его в модуль / глобальные файлы Sass.

Отредактируйте от автора вопроса, чтобы предоставить дополнительную информацию: Также неправильно импортировать global.scss в какой-либо из классов .module.scss, который вызвал ошибку. Это глобальный стиль, не нужно его повторно импортировать.

...