如何在 Svelte 中通过 scss 设置全局引导程序？

Question

我想在具有自定义主题的 Svelte (v3) 项目中使用 Bootstrap (v4.5)。

bootstrap 文档指出您可以使用 scss 执行此操作。所以我设置了 Sveltesvelte-preprocess如下：

添加到我的package.json：

    "bootstrap": "^4.5.2",
    "node-sass": "^4.14.1",
    "svelte-preprocess": "^4.0.10",

在我的rollup.config.js：

...
import preprocess from "svelte-preprocess";

export default {
  ...,
  plugins: [
    ...,
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file - better for performance
      css: (css) => {
        css.write("public/build/bundle.css");
      },
      preprocess: preprocess(),
    }),

在我的App组件中：

<style type="text/scss" global>
  // Variable overrides for bootstrap
  $primary: #19197c;
  $secondary: #fd6400;
  $light: #d8d8d8;

  @import "../node_modules/bootstrap/scss/bootstrap";

</style>

不幸的是，看起来 Svelte 清除了所有样式，因为我的应用程序中没有引导样式。我想使用引导规范化以及引导类。有小费吗？谢谢！

Answer 1

我想出了如何让这个工作。您必须在 Svelte 之外单独处理 sass，使用rollup-plugin-scss，以便不会清除类。

在rollup.config.js：

...
import scss from "rollup-plugin-scss";

export default {
  ...,
  plugins: [
    ...,
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      emitCss: true
    }),
    scss(),
    ...,

创建一个名为 的新文件main.scss：

// Variable overrides for bootstrap
$primary: #19197c;
$secondary: #fd6400;
$light: #d8d8d8;

@import "../node_modules/bootstrap/scss/bootstrap";

在main.js：

import "./main.scss";
import App from "./App.svelte";

const app = new App({
  target: document.body,
  props: {},
});

export default app;

就是这样！

Answer 2

我实际上找到了一种更简单的方法，使用 Svelte Preprocess！您需要做的一切，都在 App.svelte 中

<!-- app.svelte content -->
...
<!-- ... -->

<style lang="scss" global>
  @import "path/to/your/scss/files";
</style>

请注意，如果您"./..."在 中使用@import，则意味着它引用本地文件。如果没有"./..."（所以只是普通的"name"，那么它将从 导入node_modules。

就是这样！如果您想使用这些设置，您需要做的就是