Почему медиа-запрос переписывает стили, которые не должен переписывать?

Добрый день! Спасибо большое, нашел проблему, оказалось, что это выходки хрома, в других браузерах все ок.

Почему медиа-запрос переписывает стили, которые не должен переписывать?

Сергей delphinpro, Странно, но ширина у меня меньше 768px, конкретно в скриншоте - 423px, но все равно перекрывает... Также спасибо за замечание про инлайны...

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

shsv382, Ладно, спасибо Вам большое за уделенное время! Буду копать дальше...

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

shsv382, Также используется Webpack... sass, sass-loader присутсвуют

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

shsv382, По идее должно работать и так, и так, при этом, что с расширением, что без - один результат

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

Жпт прогоняет по вашем замечаниям, а потом циклится и теряет контекст

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

shsv382, Там просто селектор, который обращается к переменной.

.title{
    color: $purple-heart;
}

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

shsv382, Раньше в проектах так и делал. Импортировал все базисные стили в style.scss, а уже затем его к index.js. А затем при стилизации компонентов у меня были переменные из _variables.scss>style.scss>index.js.
Т. е. импортировал единожды всё

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

Михаил, Пробовал с расширением и без. Суть в области видимости переменных, они почему-то видны только в файле, куда напрямую импортируются переменные

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

shsv382, Да, пробовал, результата нет. Область видимости переменных только почему-то в файле, куда они импортированы.
Допустим, если в style.scss написать селектор с использованием переменной, то все работает. Или постоянно импортировать сами переменные в файл со стилями компонентов, но так не норм.
Т.е. вот так

// style.scss
@import "/src/base/styles/variables";
@import "/src/base/styles/fonts.scss";
@import "/src/base/styles/mixins.scss";
@import "/src/base/styles/generic.scss";

@import "normalize.css";

.title{
    color: $purple-heart;
}

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

shsv382, Да, конечно, вот переменные

// colors
$black: #000000;
$steel-gray: #181823;
$regent-gray: #8491A0;
$shuttle-gray: #5B6876;
$white: #FFFFFF;
$purple-heart: #5221E6;
$emerald: #3CC74E;
$deep-blush: #E95D90;
$serenade: #FFF3E4;
$white-pointer: #FBE4FF;

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

shsv382, До этого был относительный, тож самое...

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

Ругается на переменную scss, которая объявлена в variables.scss

Compiled with problems:
×
ERROR in ./src/components/App/app.scss (./src/components/App/app.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/App/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable: "$purple-heart".
        on line 3 of src/components/App/app.scss
>>     color: $purple-heart;
   -----------^
ERROR in ./src/components/App/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable: "$purple-heart".
        on line 3 of src/components/App/app.scss
>>     color: $purple-heart;
   -----------^

    at tryRunOrWebpackError (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5241:12)
    at __webpack_require__ (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5198:18)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5270:20
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3485:9)
    at done (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (C:\Users\iMeeGo\Desktop\apptest\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5176:43
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3482:9)
    at timesSync (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3463:5)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5138:16
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3485:9)
    at timesSync (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3463:5)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5106:15
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3485:9)
    at done (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3527:9)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5052:8
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:3493:5
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Cache.js:99:5
    at Hook.eval [as callAsync] (eval at create (C:\Users\iMeeGo\Desktop\apptest\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
    at Cache.get (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Cache.js:81:18)
    at ItemCacheFacade.get (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\CacheFacade.js:115:15)
    at Compilation._codeGenerationModule (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:3456:9)
    at codeGen (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5040:11)
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3482:9)
    at timesSync (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3463:5)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5070:14
    at processQueue (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\util\processAsyncTree.js:61:4)
    at processTicksAndRejections (node:internal/process/task_queues:78:11)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable: "$purple-heart".
        on line 3 of src/components/App/app.scss
>>     color: $purple-heart;
   -----------^

    at Object.<anonymous> (C:\Users\iMeeGo\Desktop\apptest\node_modules\css-loader\dist\cjs.js!C:\Users\iMeeGo\Desktop\apptest\node_modules\sass-loader\dist\cjs.js!C:\Users\iMeeGo\Desktop\apptest\src\components\App\app.scss:1:7)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:452:10
    at Hook.eval [as call] (eval at create (C:\Users\iMeeGo\Desktop\apptest\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5243:39
    at tryRunOrWebpackError (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5241:12)
    at __webpack_require__ (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5198:18)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5270:20
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3485:9)
    at done (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (C:\Users\iMeeGo\Desktop\apptest\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5176:43
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3482:9)
    at timesSync (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3463:5)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5138:16
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3485:9)
    at timesSync (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3463:5)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5106:15
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3485:9)
    at done (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3527:9)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5052:8
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:3493:5
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Cache.js:99:5
    at Hook.eval [as callAsync] (eval at create (C:\Users\iMeeGo\Desktop\apptest\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
    at Cache.get (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Cache.js:81:18)
    at ItemCacheFacade.get (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\CacheFacade.js:115:15)
    at Compilation._codeGenerationModule (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:3456:9)
    at codeGen (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5040:11)
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3482:9)
    at timesSync (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3463:5)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5070:14
    at processQueue (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\util\processAsyncTree.js:61:4)
    at processTicksAndRejections (node:internal/process/task_queues:78:11)

Generated code for C:\Users\iMeeGo\Desktop\apptest\node_modules\css-loader\dist\cjs.js!C:\Users\iMeeGo\Desktop\apptest\node_modules\sass-loader\dist\cjs.js!C:\Users\iMeeGo\Desktop\apptest\src\components\App\app.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nUndefined variable: \"$purple-heart\".\n        on line 3 of src/components/App/app.scss\n>>     color: $purple-heart;\r\n   -----------^\n");