web-dev-qa-db-ja.com

コンポーネントに渡された変数を使用してSvelteスタイルのCSS属性値を設定できますか

画像の名前とパスを受け取るSVELTEコンポーネントを作成します。コンポーネントにCSSを使用して画像を「背景画像」として設定させたいです。

私は次のことを試してみましたが、うまくいかないようです...

ComponentがApp.Svelte：

<Image image_url='./images/image1.jpg' />
 _

image.svelte

<script>
export let image_url;
</script>

<style>
.image{
    position:relative;
    opacity: 0.70;
    background-position:bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url({image_url});
    min-height: 100%;
}
</style>

<div class="image">
  <p>some text</p>
</div>
 _

コンポーネントを検査すると、css for background_imageは次のとおりです。

background-image: url({image_url});
 _

CSSに変換された変数を持つことは可能ですか？

syntaxsvelte
5
bejames

SvelteブロックをCSSブラックボックスとして考えてください。ブラウザ内のCSSファイルで使用できないのと同じ方法でJavaScript変数を使用することはできません。

しかし...それはCSSボックスであるため、SVELTEプリプロセッサを使用してSCSSを使用して、ブロックをコンパイルすることができます これ1 。それからあなたはただやることができます

<script>
export let image_url;
</script>

<style lang="scss">
@import "my/path/to/variables";

.image{
    position:relative;
    opacity: 0.70;
    background-position:bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url(#{$image_url});
    min-height: 100%;
}
</style>

<div class="image">
  <p>some text</p>
</div>
 _
0
cortopy