neolik
@neolik
Отторжение WP, интриги с js, усыновление canvas

Обязан ли я использовать css-модули в Next .js для импорта sass внутри компонента?

Вот код компонента Button.jsx:
import React, { Component } from 'react';
import './Button.scss';  // стили компонента

class Button extends Component {
    
    constructor(props) {
        super(props);
        this.state = {
            content: props.content ? props.content : 'Текст кнопки',
            type: props.type ? props.type : 'accent',
            size: props.textSize ? props.textSize : 'sm',
            icon: props.icon
        };
        this.className = props.className;
      }
    render () {
        return (
            <a href='/' className={`btn btn--${this.state.type} btn-size-${this.state.size} ${this.className}`}>
                <span className='btn__content'>
                    {this.state.content}
                </span>
            </a>
        )
    }
}

export default Button


Ошибка:
Global CSS cannot be imported from files other than your Custom . Please move all global CSS imports to pages\_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global


Как я понимаю, есть 2 решения проблемы:
  • Использовать css-модули и страдать с импортом классов (что я считаю крайне неудобным
  • Перенести стили компонента в глобальный файл стилей


Необходимо:
Сохранить структуру компонентов, в которой и файл стилей и и jsx код находится в одной директории.
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ответы на вопрос 1
Torin_Asakura
@Torin_Asakura
Senior Web & Mobile Developer
или использовать https://emotion.sh/docs/introduction
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
25 окт. 2020, в 17:09
19999 руб./за проект
25 окт. 2020, в 17:04
3000 руб./за проект
25 окт. 2020, в 16:59
60000 руб./за проект