将 node_modules 中的 css 导入到 svelte

Posted 2023-02-19

【中文标题】将 node_modules 中的 css 导入到 svelte

【英文标题】：Import css in node_modules to svelte

【发布时间】：2019-10-22 07:19:34

【问题描述】：

我想在我的 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中的方式

【参考方案1】：

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

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

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

【讨论】：

是的，我正在使用汇总。但是你确定我应该使用 sass 吗？所以在 svelte 中，我们必须在 sass 文件中导入 css 文件才能正常工作？好像很不方便

有一种方法可以使用 postcss 和 rollup 添加 css 文件，但似乎不太方便lengstorf.com/code/learn-rollup-css

【参考方案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" />

在您的模板中。

【讨论】：

这就是“在 index.html 中使用标签”的意思吗？那么我认为我们可能需要查看一些代码才能更好地回答您的问题。

从您的屏幕截图中，我看到您提供了您的页面，但是您的“根”或“公共”文件夹是什么？您为 css 文件设置的路径相对于您的根目录很可能是错误的。

很遗憾，my code 与您的答案相同

您用来提供代码的软件很可能不允许您在 /public 文件夹之外进行遍历。所以我会在 public 中创建一个 /css 文件夹并在那里复制 uikit 文件。并在 index.html 中更新您的标记。

【参考方案3】：

安装汇总 css 插件：

npm install -D rollup-plugin-css-only

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

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

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

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

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

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

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

【讨论】：

这是一个很好的答案（顺便说一句，应该被接受）。也许值得展示代码片段，这样它会更容易理解。或者，至少，链接到示例 repo 中的这些部分。例如：github.com/hidjou/classsed-svelte-tutorial/blob/master/….

我希望有人能看到这一点，尽管我要在很久以后才发帖。我想知道通过 npm 安装而不是仅仅复制缩小的 css 和 js 文件并将它们自己存储在静态文件夹中的意义何在。既然您必须将它们链接到 template.html 或 index.html 文件中，为什么不直接复制原始文件本身，然后您就不必在 .svelte 文件的脚本中导入 css

@Jeff 我认为主要原因是为了可维护性 - 在你不得不更新依赖项的两年内，你可能不记得将更新的 css 代码复制/粘贴到“public/global”中.css" - 如果你这样做，你可以简单地在package.json 中更新你的依赖并完成。

谢谢@GavinR 我没想到那部分

目前这似乎不再起作用了。汇总抱怨我正在导入非 javascript 文件的错误。有什么建议吗？

【参考方案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 中。所以当我打开 开发人员工具我收到有关无法加载源地图的警告

【讨论】：

似乎对 svelekit 无效

【参考方案5】：

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

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

【参考方案6】：

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

---

安装rollup-plugin-css-only

yard add -D rollup-plugin-css-only

或者

npm i -D rollup-plugin-css-only

---

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

---

现在将其导入App.svelte

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

---

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

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

【参考方案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 插件。

【讨论】：

global 是隐藏的宝石！

这是 github.com/sveltejs/svelte-preprocess 功能。我已经更新了答案。