Question

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

您可以使用scss完成的引导文档states。因此，我用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

我想出了如何使它工作的方法。您必须使用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-only
postcss
自动前缀
node-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设置全局引导？

3 个答案: