Undefined variable: «$min-height». scss?

Question

[poles1469]

Пишу на react'e.

Есть глобальный файл "style.scss", там хранятся переменные, по типу:

$weak-color: #BDBDBD;
$white-color: #fff;
$line-height: 1;
$min-height: 100vh;
$font-style: normal;

Есть еще другой файл стилей "overlay.scss", чтобы использовать переменные из "style.scss' я его импортировал:

@import url("../../style.scss") // путь правильные

Но вот при использовании переменных по типу $min-height" выдает ошибку. В чем причина?

Answer 1

[Александр]

В @import не используется url().

Comments

[poles1469]

Если импортирую без url, а именно: "@import "../../style.scss";" , то react ругается и выдает вот эту ошибку:

ERROR in ./src/components/Overlay/overlay.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/components/Overlay/overlay.scss)

[Александр]

poles1469, А что в файле overlay.scss?

[poles1469]

Александр, в overlay.scss стили для компонента, ну вот код overlay:

@import "./../../style.scss";
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($color: #000000, $alpha: .5);
    z-index: 1000;
    .basket {
        float: right;
        background-color: #fff;
        height: $min-height;
        
    }
}

[poles1469]

Александр, Как вы видите, в .basket я хочу использовать переменную из style.scss, но react выдает ошибку

[Александр]

poles1469, попробуйте заменить @import "./../../style.scss"; на @import "../../style.scss";.

[poles1469]

Александр, Проблема решена, все дело в том, что я в style.scss импортировал normalize.css, сперва это работало, но не понятно как, при использовании переменной style.scss в другие файлы scss выдавала ошибку. Сейчас я переименовал расширение normalize.css в normalize.scss и импортировал его без url(). Спасибо за ваши ответы и подсказки!