如何在 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 似乎清除了所有样式，因为我的应用程序中没有 bootstrap 样式。我想使用 bootstrap 规范化以及 bootstrap 类。有小费吗？谢谢！

Answer 1

我想出了如何让它工作的方法。您必须使用 rollup-plugin-scss 在 Svelte 之外单独处理 sass，这样类就不会被清除。

在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.

导入

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

Answer 3

我通常使用<svelte:head>来设置全局的东西。

例子

<svelte:head>
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

  <style>
    /* Global CSS via SASS */
    @import '../../_assets/sass/global';

    ._another_global_stuff {
      z_index: 1001;
    }
  </style>
</svelte:head>

汇总设置非常简单。

例子

所需模块：

svelte 预处理
rollup-plugin-css-仅
postcss
自动前缀
节点-sass

let plugins = [
  //...
  svelte({
    compilerOptions: {
      dev: !production
    },
    preprocess: sveltePreprocess({
      sourceMap: !production,
      defaults: {
        style: 'scss'
      },
      postcss: {
        plugins: [
          require('autoprefixer')()
        ]
      }
    }),
    emitCss: true
  }),
  css({output: 'bundle.css'}),
  //...
]

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

How to setup global bootstrap via scss in Svelte?

bootstrap-4

svelte

svelte-3