bootstrap-4 - 如何在 Svelte 中通过 scss 设置全局 Bootstrap ？

Question

我想在具有自定义主题的 Svelte (v3) 项目中使用 Bootstrap (v4.5)。
bootstrap 文档 states你可以用scss做到这一点。所以我用 svelte-preprocess 设置了 Svelte如下:
添加到我的 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;

就是这样!