Подскажите как использовать sass файлы в next.js

Question

Я привык писать так:

components/Nav.jsx
components/Nav.scss

Nav.jsx

import './Nav.scss';
const Nav = () => {
   return (
      <nav>
         <a href="#">Test</a>
      </nav>
   );
}

И Next.js мне выбивает ошибку, что надо использовать модульность. Ошибка:

./components/Nav.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages\_app.js. Or convert the import to Component-Level CSS (CSS Modules).

Но я придерживаюсь Flux архитектуре, и мне моим способом привычнее и удобней. Не уже ли нельзя так? Зависимости

next, react, react-dom, sass

Answer 1

вот так попробуйте:

Переименовать ./Nav.scss -> ./Nav.module.scss

import styles from './Nav.module.scss'
const Nav = () => {
   return (
      <nav>
         <a href="#" className={styles.error}>Test</a>
      </nav>
   );
}

Nav.module.scss: (пример)

.error {
  color: red;
}

Answer 2

Вам необходимо сначало изменить файл next.config.js

const path = require('path')
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

А затем подключать стили через модули

БЛОГ НА HUSL

Подскажите как использовать sass файлы в next.js

Ответы (2 шт):