materialize- css не может быть прочитано в среде Laravel + svelte - PullRequest
Новая
       10

materialize- css не может быть прочитано в среде Laravel + svelte

0 голосов
/ 24 марта 2020

Я использую Laravel 6.18. 1 под PHP 7.3. Я готов работать со Svelte на Laravel на следующем сайте.

https://dev.to/shuv1824/using-svelte-js-with-laravel-part-1-setting-up-laravel-application-with-svelte-36p4

Я скачал materialize-css в папку node_modules используя следующую команду: 

yarn install materialize-css@next

Я добавил следующий код к Laravel resources/sass/app.scss: 

@import '../../node_modules/materialize-css/sass/materialize';

Затем я скомпилировал с yarn run dev. В результате получилось приложение. css и приложение. js, убедившись, что их можно прочитать из файла Blade.

После этого я создал компонент для тестирования Svelte. Файл читает в Blade-файл, который считывал приложение. css и приложение. js, которые я создал ранее.

index.blade. php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>@yield('title')</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('/css/app.css') }}">
</head>
<body>

<example-component/>

<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>

ExampleComponent.svelte 

<svelte:options tag="example-component"/>
<script>
    import { onMount } from "svelte";

    onMount(() => {
        console.log("the component has mounted");
    });
</script>

<main>
    <div class="container">
        <div class="row">
            <div class="col s5">
                Example Component
            </div>

            <div class="col s5">
                I'm an example component.
            </div>
        </div>
    </div>
</main>

Однако в ExampleComponent.svelte стиль materialize- css не применяется.

Итак Я переписал код следующим образом.

ExampleComponent.svelte 

<svelte:options tag="example-component"/>
<script>
    import { onMount } from "svelte";

    onMount(() => {
        console.log("the component has mounted");
    });
</script>

<main>
    <div class="container">
        <div class="row">
            <div class="col s5">
                Example Component
            </div>

            <div class="col s5">
                I'm an example component.
            </div>
        </div>
    </div>
</main>

<style>
    @import "../../../../node_modules/materialize-css/dist/css/materialize.min.css";
</style>

Однако стиль материализации - css по-прежнему неприменим. Я не знаю почему. Буду признателен за ваш совет.

Спасибо.

...