将 node_modules 中的 css 导入到 svelte

Question

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

我用yarn add uikit安装了它

当然我必须导入 css 文件，用

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

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

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

这还不可用吗？

或者我应该用 yarn 安装它，然后我必须像 [这个解决方案] 一样将所需的文件复制到 node_modules 之外？(How to add css from node_modules to template.html in Svelte)

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

Answer 1

不熟悉 UI 工具包，但根据提供的信息，在我看来，您应该将它导入（使用 @import）scss 或 sass 文件，而不是 css 文件。 在 css 文件中使用 @import 不会被解释，但正如您所见，它只是在浏览器中显示为对 node_modules 目录中文件的引用，而浏览器无法使用该文件。

假设您正在使用汇总，为了处理 scss 文件，您可能需要为汇总添加 svelte-preprocess-sass 依赖项以支持 sass（和 scss）。

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

Answer 2

所以如果你想使用 UIKit 我会去看看主页上的信息。

来自UIKit网站介绍中的HTML markup部分：

你需要添加：

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

到你的 html 文件的头部。

所以在你的情况下，你可以指向你的 node_modules 文件夹，比如

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

在您的模板中。

Answer 3

1. 安装汇总 css 插件：

npm install -D rollup-plugin-css-only

1. 转到 rollup.config.js 并通过将已安装的插件添加到插件列表来配置它，输出参数的值为 css 文件。稍后，该文件将在您的公用文件夹中创建，并将原始 css 文件的内容复制到其中：

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

1. 转到 index.html 并将文件的链接添加到 head 部分：

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

4. 将原始的 webkit css 文件导入到 Svelte 组件的 script 标签中：

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

解决方案不是我的。所有学分都归这个人所有（视频中大约 6:00）： https://www.youtube.com/watch?v=RBQg89ak_NY

Answer 4

我在听 Marvelous Walrus 的回答时遇到了一些麻烦，所以这里有更多 相同步骤的显式版本。

Rollup 是 svelte 使用的捆绑器。 （你可能知道 webpacker 是一个打包器）。

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

npm install -D rollup-plugin-css-only

第二步：编辑rollup.config.js

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

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

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

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

当汇总完成时，它将读取您的组件导入的所有 css 文件， 合二为一，写信给public/build/extra.css

第三步：编辑public/index.html

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

<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 文件了。 例如我添加了引导程序

npm install bootstrap

然后找到我想要使用的 css 文件（它们在 /node_modules/bootstrap/dist/css/ 中） 并在 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 中。所以当我打开 开发人员工具我收到有关无法加载源地图的警告

Answer 5

使用 Parcel 作为捆绑器，您可以放入您的 index.js（入口点）

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

Answer 6

对于对此感兴趣的人，我正在使用这个简洁的解决方案：

---

1. 安装rollup-plugin-css-only

yard add -D rollup-plugin-css-only

或者

npm i -D rollup-plugin-css-only

---

1. 在您的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, ""))
            }
        }),
    ]
}

---

1. 现在将其导入App.svelte

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

---

4. 将此添加到您的 index.html 文件中

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

Answer 7

使用 Svelte v.3.24.0 和 svelte-preprocess 可以直接在组件的样式标签中导入 css。

rollup.config.js：

import autoPreprocess from 'svelte-preprocess';

...
svelte({
    preprocess: autoPreprocess({
        postcss: true,
        scss: { includePaths: ['src', 'node_modules'] },
    })
}),
...

组件：

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

• 组件的样式标签应该包含 lang="scss" 属性。
• 请注意css文件的导入应该是without an extension after the file name

所以我们不需要在这里安装任何额外的 Rollup 插件。