Блог

Главная - Вопросы по программированию - Vue: стиль SCSS применяется не при подаче, а только при перезагрузке

Vue: стиль SCSS применяется не при подаче, а только при перезагрузке

#html #css #sass #vuejs2 #bootstrap-vue

#HTML #css #sass #vuejs2 #bootstrap-vue

Вопрос:

В настоящее время я работаю над проектом, который заставляет меня чесать голову.

Проблема в том, что я бы установил некоторый стиль SCSS для компонента или страницы — сохранить и запустить компонент, но изменения не будут видны. Обновите страницу, и изменения будут там.

Вот как будет выглядеть рассматриваемая область при первом входе на страницу.

введите описание изображения здесь

Так выглядит та же область при обновлении

введите описание изображения здесь

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

Это проект Vue, который использует Bootstrap-Vue для большинства компонентов. Все пользовательские стили для компонента выполняются в файле SCSS, включенном в файл компонента Vue. Таким образом, типичная настройка файловой структуры будет:

  • Имя раздела, например. Панели мониторинга
    • задания (vue)
    • сотрудники (vue)
    • стиль (scss)

Затем таблица стилей будет включена в файл vue с тегом импорта стиля в конце файла.

Это далеко не единственный случай стиля, который делает это. Есть несколько других, которые тоже это делают, и все они мелочи. Я бы подумал, что таблица стилей не соединяется должным образом, но другие изменения стиля, определенные в файле, применяются в обязательном порядке. Ссылаясь на приведенный выше пример, серый фон на других вкладках определяется в той же таблице стилей и применяется.

Мои зависимости на данный момент заключаются в следующем:

 "bootstrap-vue": "^2.19.0",
"chart.js": "^2.9.4",
"core-js": "^3.6.5",
"node-sass": "^5.0.0",
"particles-bg-vue": "^1.3.5",
"sass-loader": "^10.1.0",
"vue": "^2.6.11",
"vue-chartjs": "^3.5.1",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"

Есть ли причина для этого? Я попытался осмотреться, но не могу найти ничего, что связано. И на данный момент я бы согласился просто узнать, что вызывает это, даже если нет исправления…

Ответ №1:

Оказывается, у меня неправильная структура моего стиля в scss…

у меня была такая структура, как

 nav{
 navlink{}
}

там , где это , по -видимому, и должно было быть

 nav{}
navlink{}

Поэтому, если у вас действительно есть проблема, проверьте и перепроверьте свою структуру…

Все еще странно, что он работал предыдущей ночью, но решил не работать на следующий день без изменений в коде. Но это также может быть просто какой-то проблемой с кэшем. Я не знаю.

Метки: