Переменные CSS не существуют в визуализированном представлении - PullRequest
Новая
       11

Переменные CSS не существуют в визуализированном представлении

0 голосов
/ 28 февраля 2019

Мне дали веб-приложение в файлах HTML5 + CSS3 и JS. Все работает так, как есть.

Теперь я хочу преобразовать веб-сайт в приложение ASP.NET MVC5.

У меня проблемы с файлом general.css, который содержит переменные, подобные этой: 

/*===== Css Variable =====*/

:root {
--white: #ffffff;
--primary-color-1: #118acb;
--secondary-color-1: #72305f;
--primary-hover-color-1: #0d6a9c;
--title-color-1: #333333;
--body-font-color-1: #777;
--body-font-family-1: 'Poppins';
--body-font-size-1: 16px;

--primary-color-2: #e7ad44;
--primary-hover-color-2: #dc981c;
--title-color-2: #4a4a4a;
--body-font-color-2: #8a8a8a;
--body-font-family-2: 'Roboto';
--body-font-size-2: 15px;

--primary-color-4: #ffb400;
--secondary-color-4: #005eab;
--primary-hover-color-4: #cc9000;
--title-color-4: #14141e;
--body-font-color-4: #7c7c7c;
--body-font-family-4: 'Poppins';
--body-font-size-4: 16px;
}

@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon/icomoon.eot');
src: url('../fonts/icomoon/icomoon.eot') format('embedded-opentype'),
url('../fonts/icomoon/icomoon.ttf') format('truetype'),
url('../fonts/icomoon/icomoon.woff') format('woff'),
url('../fonts/icomoon/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}

И в моем header.css я называю эту переменную как: 

.demo-4 header .sub-menu li a:hover {
   color: var(--primary-color-4);
}

И я читал этот пост и это известная проблема с комплектацией по умолчанию для mvc, которая не может распознать такие переменные.

Мой вопрос: как я могу заставить это работать?Должен ли я конвертировать только этот файл в sass / less с gulp?Будут ли остальные .css файлы "читать" эти переменные, например, из sass?

...