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 и не изобретать велосипеды.
