Importer le CSS dans node_modules vers svelte

Pas familier avec le kit d'interface utilisateur, mais d'après les informations fournies, il me semble que vous devriez l'importer (en utilisant @import ) dans un fichier scss ou sass , pas dans un fichier css. L'utilisation de @import dans un fichier css n'est pas interprétée, mais comme vous pouvez le voir, elle apparaît simplement dans votre navigateur en tant que référence à un fichier dans le répertoire node_modules , qui n'est pas disponible pour le navigateur.

En supposant que vous utilisez un rollup, pour traiter les fichiers scss , vous devrez probablement ajouter la dépendance svelte-preprocess-sass pour que le rollup prenne en charge sass (et scss).

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

Donc, si vous voulez utiliser UIKit, j'irais regarder les informations sur la page d'accueil.

À partir de la section de balisage HTML dans l'introduction sur le site UIKit:

Vous devez ajouter:

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

à la tête de votre fichier html.

Donc, dans votre cas, vous pouvez pointer vers votre dossier node_modules comme

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

dans votre modèle.

1. Installez le plugin css rollup:

npm install -D rollup-plugin-css-only

2. Accédez à rollup.config.js et configurez-le en ajoutant le plugin installé à la liste des plugins, avec le paramètre de sortie où la valeur est un fichier css. Plus tard, ce fichier sera créé dans votre dossier public et le contenu du fichier css d'origine y sera copié:

css({ output: "public/uikit.css" })

3. Accédez à index.html et ajoutez le lien vers votre fichier dans la section head:

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

4. importez le fichier css webkit d'origine dans la balise de script de votre composant Svelte:

import "../node_modules/uikit/dist/css/uikit.min.css";

La solution n'est pas la mienne. Tous les crédits vont à ce gars (vers 6h00 dans la vidéo): https://www.youtube.com/watch?v=RBQg89ak_NY

J'ai eu du mal à suivre la réponse de Marvelous Walrus, alors voici une version plus explicite des mêmes étapes.

Rollup est le bundler utilisé par svelte. (Vous connaissez peut-être webpacker en tant que bundler).

Étape 1: Installez le plugin css rollup:

<script>
  // build/extra.css is fed from css files imported here
  import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
  import "../node_modules/bootstrap/dist/css/bootstrap-grid.min.css";

Étape 2: modifier rollup.config.js

vous devez importer le plugin que vous venez d'installer au début de rollup.config.js :

npm install bootstrap

et plus bas dans le fichier, vous devez trouver le tableau des plugins et ajouter un nouveau sur appelé css. Par exemple, je l'ai inséré avant le plugin svelte , qui ressemble à ceci:

<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="stylesheet" href="/build/extra.css" />
<link rel="stylesheet" href="/global.css" />
<link rel="stylesheet" href="/build/bundle.css" />

Lorsque le rollup le fait, il lit tous les fichiers css importés par vos composants, les combine en un seul et les écrit dans public/build/extra.css

Étape 3: éditez public/index.html

Ajoutez le lien vers le nouveau fichier css. Pour moi, cela ressemblait à ceci:

  plugins: [
    css({ output: "public/build/extra.css" }),
    svelte({ ... 

Étape 4: profitez!

Vous êtes maintenant prêt à utiliser les fichiers css de vos packages npm installés. par exemple j'ai ajouté bootstrap par

import css from "rollup-plugin-css-only";

puis recherchez les fichiers css que je souhaite utiliser (ils se trouvaient dans / node_modules / bootstrap / dist / css /) et importez-les au début de App.svelte:

npm install -D rollup-plugin-css-only

Questions ouvertes

Rollup ne semble pas gérer les sourcemaps mentionnés dans bootstrap.min.css et bootstrap-grid.min.css. Ainsi, lorsque j'ouvre les outils de développement, je reçois un avertissement indiquant que je ne peux pas charger les sourcemaps

Avec Parcel comme bundler, vous pouvez mettre dans votre index.js (point d'entrée)

@import 'milligram/dist/milligram.min.css'

Pour quiconque s'intéresse à cela, j'utilise cette solution soignée:

1. Installez rollup-plugin-css-only

<link rel="stylesheet" href="/build/base.css" />

Ou

<script>
    import "../node_modules/uikit/dist/css/uikit.min.css";
</script>

2. Utilisez-le dans votre rollup.config.js

import css from "rollup-plugin-css-only";

export default {
    plugins: [
        css({
            output: function (styles, styleNodes) {
                // Filter out any source map imports
                let reg = new RegExp(/^(\/*).*(.map) ?(\*\/)$/gm);
                writeFileSync("public/build/base.css", styles.replace(reg, ""))
            }
        }),
    ]
}

3. Maintenant, importez-le dans App.svelte

npm i -D rollup-plugin-css-only

4. Ajoutez ceci à votre fichier index.html

yard add -D rollup-plugin-css-only

Avec Svelte v.3.24.0, il est possible d'importer directement du CSS dans la balise de style de votre composant:

<style lang="scss" global>
    @import '../node_modules/my-package/cssfile';
    @import '../node_modules/my-package/scssfile.scss';
</style>

• La balise de style du composant doit contenir l'attribut lang = "scss" .
• et veuillez noter que l'importation du fichier css doit être sans extension après le nom du fichier

Nous n'avons donc pas besoin d'installer de plug-ins Rollup supplémentaires ici.