web-dev-qa-db-ja.com

node_modulesのcssをsvelteにインポートする

私のsvelteプロジェクトでcssフレームワークを使用したいのですが、この場合はuikitでした。

yarn add uikitでインストールしました

そしてもちろん、cssファイルをインポートする必要があります。

@import '../node_modules/uikit/dist/css/uikit.min.css"

しかし、それをインポートするところはどこでも機能しません

  • App.svelteスタイル
  • Global.cssの内部
  • Index.html内でのタグの使用

これはまだ利用できませんか？

それとも糸でインストールする必要がありますか？その後、[このソリューション]のように必要なファイルを外部のnode_modulesにコピーする必要がありますか？（ CSSをnode_modulesからSvelteのtemplate.htmlに追加する方法 ）

これはuikitだけの制限ではなく、node_modulesのサードパーティのcssファイルをsvelteアプリにインポートする方法だと思います

error

svelte
6
Ilham Wahabi GX

UIキットに精通していませんが、提供された情報から、CSSではなくscssまたはsassファイル内にインポートする必要があるようです（@importを使用）。ファイル。 cssファイルで@importを使用しても解釈されませんが、ご覧のとおり、node_modulesディレクトリ内のファイルへの参照としてブラウザーに表示されますが、ブラウザーでは使用できません。

ロールアップを使用している場合、scssファイルを処理するには、sass（およびscss）をサポートするために、ロールアップのsvelte-preprocess-sass依存関係を追加する必要がある可能性があります。

https://github.com/ls-age/svelte-preprocess-sass

0
Daniel

したがって、UIKitを使用する場合は、ホームページの情報を確認します。

UIKitサイトの紹介の HTMLマークアップ セクションから：

追加する必要があります：

    <link rel="stylesheet" href="css/uikit.min.css" />

あなたのhtmlファイルの先頭に。

したがって、あなたの場合、node_modulesフォルダを次のように指すことができます

<link rel="stylesheet" href="../node_modules/uikit/dist/css/uikit.min.css" />

テンプレートで。

0
Michael Fürstenberg