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

【问题标题】：How to setup global bootstrap via scss in Svelte?如何在 Svelte 中通过 scss 设置全局引导程序？
【发布时间】：2020-11-27 16:08:31
【问题描述】：

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

引导文档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-4 svelte svelte-3

【解决方案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;

就是这样！

【讨论】：

谢谢。但是如果我导入我自己的自定义 scss 文件，当我更改它时样式不会更新。我需要评论@import，保存文件，取消评论，保存，然后更新。
@BabakKarimiAssl 像 scss({watch: 'src'}) 这样更新 scss 插件以观察 src 文件夹中的 scss 文件是否有更改。
@BabakKarimiAssl 也是为了让你构建包干净，不要在main.js 中导入 scss 文件，而是在scss({watch: 'src',output: 'public/global.css'}) 中添加这样的输出路径并直接在 index.html 中链接输出文件global.css /跨度>

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案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>

而且汇总设置非常简单。

示例

需要的模块：

精巧的预处理
rollup-plugin-css-only
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'}),
  //...
]

【讨论】：