Как использовать Stylance с Лептос?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как использовать Stylance с Лептос?

Сообщение Anonymous »

Я изо всех сил старался использовать CSS-файл с ограниченной областью действия (с помощью Stylance) для стилизации компонента Leptos, и, кажется, это работает, но стили просто не применяются. Файл правильно читается Stylance и модуль генерируется правильно, но при рендеринге стилей нет.
Вот структура моего проекта:

Код: Выделить всё

Cargo.toml
index.html
dist/ ...
target/ ...
src/
- lib.rs
- main.rs
- test.module.css
В main.rs у меня есть следующий код:

Код: Выделить всё

use leptos::*;
use my_crate_name::*; // to import my stuff from lib.rs

pub fn main() {
mount_to_body(|| view! {  });
}

#[component]
fn App() -> impl IntoView {
view! {  }
}
В lib.rs:

Код: Выделить всё

use stylance::import_crate_style;

import_crate_style!(style, "src/test.module.css");

#[component]
pub fn MyLibraryCustomComponent() -> impl IntoView {
view! { "This is a title" }
}
И, наконец, вот мой test.module.css, который я написал:

Код: Выделить всё

.test {
color: blue;
}
Я обслуживаю приложение на локальном хосте: 8080 (используя магистральный сервис) и с помощью консоли разработчика вижу, что мой элемент имеет тест класса -aRandomHash. Пока что это нормально и намеренно. Что ненормально, так это то, что я нигде не вижу своего стиля «цвет: синий». В элементе его просто нет, как будто его и не существует, что странно, поскольку Stylance прочитал файл и извлек класс.
Я' Я новичок в Leptos и Stylance, поэтому понятия не имею, что делаю. Документация по использованию Stylance с Leptos очень мала и практически отсутствует (https://book.leptos.dev/interlude_styli ... -css-files).Обратите внимание, что я не использую Nightly.

РЕДАКТИРОВАТЬ: я пробовал использовать :global(.test ) в файле CSS, и это ничего не изменило. Мой элемент h1 не синий.


Подробнее здесь: https://stackoverflow.com/questions/782 ... ith-leptos
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»