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应用程序的方式

error

Answer 1

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

Rollup是svelte使用的捆绑器。（您可能将webpacker视为捆绑程序。）

步骤1：安装汇总CSS插件：

npm install -D rollup-plugin-css-only

步骤2：编辑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

第3步：编辑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";

悬而未决的问题

汇总似乎无法处理提到的源地图在bootstrap.min.css和bootstrap-grid.min.css中。所以当我打开开发人员工具我收到关于无法加载源地图的警告

Answer 2

安装汇总CSS插件：

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

css（{输出：“ public / uikit.css”}）
转到index.html并将指向文件的链接添加到头部：
将原始Webkit css文件导入到Svelte组件的脚本标签中：

导入“ ../ node_modules / uikit / dist / css / uikit.min.css”;

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

Answer 3

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

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

Answer 4

使用Svelte v.3.24.0，可以直接在组件的样式标签中导入css：

<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插件。

Answer 5

不熟悉UI工具包，但是从提供的信息来看，您似乎应该将其导入（使用@import）到scss或sass文件中，而不是css文件。在css文件中使用@import不会得到解释，但是如您所见，只是在浏览器中显示为对node_modules目录中文件的引用，该目录对浏览器不可用。< / p>

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

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

Answer 6

因此，如果您想使用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 7

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

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

导入node_modules中的CSS以使其精简

7 个答案: