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

Question

[21VEKIT]

Всем привет, возник вопрос, как я могу подключить глобально переменные breakpoints.scss и использовать их без импортов?

Это вот пример переменных scss

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

Вот я подключаю их в index.scss

@import "fonts";
@import "breakpoints";

:root {
  --main-red: #e53935;
  --light-green: #b7e1a3;
  --dark-green: #1e5504;
  --lime-green: #62c334;
  --dark-red: #c2100c;
  --bright-red: #e53935;
  --pastel-pink: #f0c4c4;
  --midnight-blue: #081226;
  --steel-gray: #525967;
  --silver-gray: #aeb0b4;
  --light-silver-gray: #e5e9ea;
  --light-gray: #f2f6f6;
  --white: #ffffff;
  --whitish-gray: #f1f3f4;
  --mistyGray: #d2d4d6;
}

* {
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
}

button {
  all: unset;
}

a {
  all: unset;
}

body {
  background: var(--whitish-gray);
}

А вот я в _app.tsx

// Данный экспорт по умолчанию является обязательным
import { FC } from "react";
import { AppProps } from "next/app";
import "./styles/index.scss";

const App: FC<AppProps> = ({ Component, pageProps }) => (
  <Component {...pageProps} />
);

export default App;

После я пробую использовать их

.track {
  background: var(--white);
  padding: 28px 36px;
  border-radius: 24px;
}

.tags {
  display: flex;
  margin-top: 20px;
}

.tag:not(:first-child) {
  margin-left: 10px;
}

.line {
  margin: 0 24px;
}

.wrapperPlayer {
  display: flex;
  width: 100%;
}

.wrapperButtons {
  margin-left: 36px;
}

.actionButton:not(:first-child) {
  margin-left: 18px;
}

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

}

И выдает вот такую вот ошибку

Comments

[Константин]

Вот тут был похожий вопрос Тыц..
Но прямого решения тогда не нашли.

Answer 1

[Михаил Р.]

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<AppProps> = ({ Component, pageProps }) => (
  <Component {...pageProps} />
);

export default App;

Если Вы пишите "реактивные" приложения, то я бы рекомендовал уходить от классического css/scss к css-in-js, например используя emotion.js.

Но тут видите, мы все равно подключаем
Dmitrijs Balcers "breakpoints"; в BestComponent, а надо без импорта, сразу

В случае с SCSS переменными, они не могут быть доступны глобально без импорта, как это возможно с CSS переменными, которые определены в :root. Это ограничение SCSS и его способа компиляции в 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 и не изобретать велосипеды.

Comments

[21VEKIT]

Но тут видите, мы все равно подключаем
Dmitrijs Balcers "breakpoints"; в BestComponent, а надо без импорта, сразу

[Sanvi]

Михаил Р.,

Если Вы пишите "реактивные" приложения, то я бы рекомендовал уходить от классического css/scss к css-in-js, например используя emotion.js.

+

[Михаил Р.]

21VEKIT, обновил ответ

[21VEKIT]

Михаил Р., Спасибо, помогло