Как можно глобально подключить переменные _breakpoints в проекте NEXT и использовать их?

Для того чтобы использовать глобальные переменные без импортов в проекте NEXT.js, можно воспользоваться механизмом глобальных стилей.

1. Создайте новый файл с глобальными стилями, например `globals.scss`, и определите в нем переменные `breakpoints`:
```scss
$breakpoints: (
  sm: 450px,
  md: 768px,
  lg: 1024px,
  xl: 1440px,
);
```

2. В файле `_app.tsx` импортируйте этот файл до определения компонента App:
```tsx
import "../styles/globals.scss";

function App({ Component, pageProps }) {
  // ...
}
```

3. Теперь вы можете использовать переменные `breakpoints` в любом компоненте вашего проекта Next.js без необходимости импорта:
```tsx
import React from "react";

function MyComponent() {
  return (
    <div className="my-component">
      {/*
        Использование переменных `breakpoints` без импортов
      */}
      <style jsx>{`
        .my-component {
          background-color: blue;
          @media (min-width: $breakpoints[xl]) {
            background-color: red;
          }
        }
      `}</style>
    </div>
  );
}

export default MyComponent;
```

Теперь все компоненты в вашем проекте смогут использовать переменные `breakpoints` без явного импорта файла с переменными.

breakpoints.scss:

$breakpoint_sm: 300px;
$breakpoint_md: 700px;
$breakpoint_xl: 1000px;

BestComponent.scss:
@import "breakpoints";

@media screen and (max-width: $breakpoint_md) {
  // ...
}

index.scss:
@import "fonts";
@import "breakpoints";

_app.tsx:
import { FC } from "react";
import { AppProps } from "next/app";
import "./styles/index.scss";

const App: FC = ({ Component, pageProps }) => (
  
);

export default App;

1. Если вы разрабатываете "реактивные" приложения, рекомендуется использовать css-in-js подход, например, с помощью библиотеки emotion.js.

2. В случае с переменными SCSS, они не могут быть доступны глобально без импорта, как это возможно с CSS переменными, определенными в :root. Это ограничение SCSS и его способа компиляции в CSS.

3. Варианты решения:

- Использовать CSS переменные в :root:
:root {
  --breakpoint-sm: 300px;
  --breakpoint-md: 700px;
  --breakpoint-xl: 1000px;
}

@media screen and (max-width: var(--breakpoint-md)) {}

- Использовать sass-loader в webpack для автоматического импорта переменных в каждый файл:

{
  test: /\.scss$/,
  use: [
    "style-loader",
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        additionalData: `@import "path/breakpoints.scss";`
      }
    }
  ]
}

- Использовать css-in-js и не изобретать велосипеды