Блог

Я разрабатываю приложение, используя Ruby-on-Rails для серверной части и Svelte для интерфейса. В качестве RoR Svelte компилируется с использованием Webpacker (с использованием RoR Webpack для установки Svelte). Я использую Bootstrap 4 для оформления страниц. Хотя я могу использовать классы начальной загрузки в HTML-частях файла Svelte, я не могу использовать @extend в style разделе, если я не включу Bootstrap его в конкретный компонент.

Вот мои файлы. Процесс загрузки контролируется config/webpack/loaders/svelte.js :

 const autoPreprocess = require('svelte-preprocess');

module.exports = {
  test: /.svelte(.erb)?$/,
  use: {
    loader: 'svelte-loader',
    options: {
      dev: true,
      hotReload: false,
      preprocess: autoPreprocess()
    }
  }
};
 

Приложение svelte запускается в браузере с помощью HTML-файла, загружающего следующие сценарии в app/javascript/packs/start_svelte.js :

 /* eslint no-console: 0 */

// This file provides the mechanism to load the Svelte app itself.  Invoked from application.html.erb
import 'bootstrap';
import '@fortawesome/fontawesome-free/js/all';

import App from "../components/App.svelte";

document.addEventListener('DOMContentLoaded', () => {
  const app = new App({
    target: document.body,
    props: {
      name: 'Svelte'
    }
  });

  window.app = app;
});
 

Это app/javascript/components/App.svelte загружается из приведенного выше:

 <script lang="ts">
    import Router from 'svelte-spa-router'
</script>

<style lang="scss" global>
  @import 'node_modules/bootstrap/scss/bootstrap';
</style>

<!-- Navigation -->
... core page structure

<Router {routes}/>
 

У меня есть файл компонента ExpenseEntryTable.svelte . Я могу использовать классы начальной загрузки непосредственно в HTML без каких-либо проблем. Однако я могу использовать их в этом разделе только в том случае, если я включу файл Bootstrap.scss локально. Вот мой файл компонента (сокращенный):

 <script lang="ts">
    import { flip } from 'svelte/animate';

    import ExpenseEntryRow from "./ExpenseEntryRow.svelte";
    import RailsFields from "./RailsFields.svelte";

    export let expenseEntries;

    ... code to handle some interactive stuff
</script>

<div class="expenses-claim-table">
    <div class="form col-12">
        <div id="expense-entries-header" class="form-row">
            <div class="form-group col-1">Seq</div>
            <div class="form-group col-1">Date</div>

           ... more columns 
        </div>
    </div>

   ... more stuff to do with the column
</div>

<style lang="scss">
    @import "node_modules/bootstrap/scss/bootstrap"; // without this compiler throws error two lines down

    .expenses-claim-table {
        @extend .list-group;  // without local import this line generates the error
    }
</style>
 

Вот дамп ошибки компилятора Svelte, если @include не включен локально:

 ERROR in ./app/javascript/components/ExpenseEntryTable.svelte
Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ".expenses-claim-table" failed to @extend ".list-group".
The selector ".list-group" was not found.
Use "@extend .list-group !optional" if the extend should be able to fail.
 

Я бы предпочел не включать @import на каждую страницу, на которой я хочу использовать классы и переменные начальной загрузки в <style> разделе, и подумал, что глобальный флаг в App.svelte сделает это ненужным. Есть предложения?