将 node_modules 中的 css 导入到 svelte [英] Import css in node_modules to svelte

问题描述

我想在我的 svelte 项目中使用 css 框架，在本例中它是 uikit.

I want to use css framework in my svelte project, in this case it was uikit.

我已经用 yarn add uikit

当然我必须导入css文件，

And of course i have to import the css file, with

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

但这不起作用，无论我在哪里导入

But that's not work, wherever i'm import that

• App.svelte 风格
• 在 global.css 中
• 在 index.html 中使用标签

现在还没有吗?

或者我应该用yarn安装它，然后我必须像[这个解决方案]一样将所需的文件复制到外部node_modules?(如何在 Svelte 中将 css 从 node_modules 添加到 template.html)

Or am I should install that with yarn, and after that I have to copy required file to outside node_modules just like [this solution]?(How to add css from node_modules to template.html in Svelte)

我认为这不仅仅是对 uikit 的限制，而是我们将 node_modules 中的第三方 css 文件导入 svelte 应用程序的方式

I think this is not restriction just for uikit, instead the way we import third party css file in node_modules into svelte app

推荐答案

我在遵循 Marvelous Walrus 的回答时遇到了一些问题，所以这里有更多相同步骤的显式版本.

I had some trouble following Marvelous Walrus's answer, so here's a more explicit version of the same steps.

Rollup 是 svelte 使用的打包器.(你可能知道 webpacker 是一个打包器).

Rollup is the bundler used by svelte. (You might know webpacker as a bundler).

第 1 步:安装汇总 css 插件:

npm install -D rollup-plugin-css-only

第 2 步:编辑 rollup.config.js

需要在rollup.config.js开头导入你刚安装的插件:

you need to import the plugin you just installed at the beginning of rollup.config.js:

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

在文件的更深处，您需要找到插件数组，并添加一个名为 css 的新插件.例如我在 svelte 插件之前插入它，它看起来像这样:

and farther down in the file you need to find the array of plugins, and add a new on called css. For example I inserted it before the svelte plugin, which looks like this:

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

当 rollup 完成它的事情时，它会读取您的组件导入的所有 css 文件，将它们合二为一，写入public/build/extra.css

When rollup does it's thing, it will read all the css-files imported by your components, combine them into one, and write them to public/build/extra.css

第 3 步:编辑 public/index.html

将链接添加到新的 css 文件.对我来说，这看起来像这样:

Add the link to the new css file. For me this looked like this:

<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" />

第 4 步:盈利！

现在您已准备好使用已安装的 npm 包中的 css 文件.例如我添加了引导程序

Now you are all set to use css files from your installed npm packages. for example I added bootstrap by

npm install bootstrap

然后找到我想要使用的 css 文件(它们在/node_modules/bootstrap/dist/css/中)并在 App.svelte 的开头导入它们:

then finding the css files I want to use (they were in /node_modules/bootstrap/dist/css/) and importing them in the beginning of App.svelte:

<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";

未解决的问题

Rollup 似乎没有处理提到的源映射在 bootstrap.min.css 和 bootstrap-grid.min.css 中.所以当我打开开发人员工具 我收到有关无法加载源映射的警告

Rollup does not seem to handle the sourcemaps that are mentioned in bootstrap.min.css and bootstrap-grid.min.css. So when I open the developer tools I get a warning about not being able to load the sourcemaps

这篇关于将 node_modules 中的 css 导入到 svelte的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！