Как использовать немодульный sass?

Question

[Pavel M]

добрый день.
в next.config.js прописано следующее

sassOptions: {
		includePaths: [path.join(__dirname, 'styles')]
	},

папка styles:
index.scss
variables.scss
vars.scss
mixins.scss
и т.д.

из папки styles выходил один глобальный index.scss, который импортит все sass файлы в этой папке и всё работает.

далее папка components, в которой лежит например, Accordion, и у него есть Accordion.module.scss, который внутри компонента омпортиться через export styles from './Accrodion.module.scss', и обращение к styles так же работает.

по мере роста приложения, я понял что мне крайне неудобно использовать модули, и я бы хотел в компонентах воспользоваться обычным классическим sass, таким же, как и в папке styles, но к сожалению:

./components/Atoms/Accordion/accordion.scss
Global CSS cannot be imported from files other than your Custom . Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: components/Atoms/Accordion/Accordion.tsx

я бы мог писать стили компонентов в папке styles, и это бы работало, но хочу что бы файл стилей компонента был в папке с самим компонентом.

возможно, как-то можно расширить

sassOptions: {
		includePaths: [path.join(__dirname, 'styles')]
	},

что бы он ещё смотрел и за папкой styles и за папкой components?
возможно я плохо гуглил, но гуглежка меня постоянно возвращает к использованю модулей.

Answer 1

[Сергей delphinpro]

возможно, как-то можно расширить

ну так это же массив, не видите?

sassOptions: {
  includePaths: [
    path.join(__dirname, 'styles'),
    path.join(__dirname, 'components'),
  ]
},

Comments

[Pavel M]

Вижу, и добавление вот так ещё одной папки не решило проблему.

я даже попробовал создать в components index.scss. в который импортировал @import './Atoms/Accordion/accordion.scss', и этот index из компонентов подключить в app.js:

./components/Atoms/Accordion/accordion.scss
Global CSS cannot be imported from files other than your Custom . Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: components/Atoms/Accordion/Accordion.tsx

проект разумеется пересобрал после изменения конфига