Как настроить глобальный bootstrap через s css в Svelte? - PullRequest
Новая
       272

Как настроить глобальный bootstrap через s css в Svelte?

0 голосов
/ 07 августа 2020

Я хочу использовать Bootstrap (v4.5) в проекте Svelte (v3) с настраиваемой темой.

В документации bootstrap указано , что вы можете сделать это с помощью с css. Итак, я установил Svelte с svelte-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 удаляет все стили, так как я не получаю стили bootstrap в моем приложении. Я хотел бы использовать bootstrap нормализацию, а также bootstrap классы. Какие-нибудь советы? Спасибо!

1 Ответ

1 голос
/ 10 августа 2020

Я понял, как заставить это работать. Вы должны отдельно обработать sass вне Svelte, используя 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;

Вот и все!

...