импорт 'vuetify / dist / vuetify.min.css' испортил все мои cara Laravel - PullRequest
Новая
       11

импорт 'vuetify / dist / vuetify.min.css' испортил все мои cara Laravel

0 голосов
/ 24 сентября 2018

В проекте laravel я добавил один компонент vuetify v-progress-циркуляр для одного из моих компонентов vue, как показано ниже:

Но импорт CSS используется в app.js (или только в этом компоненте Vue)) 

 import 'vuetify/dist/vuetify.min.css'

испортил все CSS в оставшемся проекте Laravel: например, визуально кажется, что мой HTML-контейнер заменен контейнером-флюидом, текстовый шрифт изменен, высота навигационной панели также, некоторые html-позиции измененыи т. д.

(у меня возникла та же проблема при попытке повысить Booprap vue.)

Как ограничить использование vuetify css, используемого для моего компонента, для воздействия на весь оставшийся код проекта? 

<template>
    <v-app>
        <v-content>
            <v-container>
                <div id="">
                    <vue-word-cloud
                            :words="words"
                            :progress.sync="progress"
                            :color="color"
                            font-family="Roboto"
                            style="width: 100%; height: 200px;" class="cloud_tag"
                    > </vue-word-cloud>
                    <v-scale-transition>
                        <v-progress-circular
                                v-if="progress"
                                :rotate="-90"
                                :size="100"
                                :value="Math.round(progress.completedWords / progress.totalWords * 100)"
                                :width="10"
                                class="v-no-animation"
                                color="primary"
                                style="
                                bottom: 0;
                                left: 0;
                                margin: auto;
                                position: absolute;
                                right: 0;
                                top: 0;
                            "
                        >     {{ Math.round(progress.completedWords / progress.totalWords * 100) }}%</v-progress-circular>
                    </v-scale-transition>
                </div>
            </v-container>
        </v-content>
    </v-app>

    <script async defer>
        import VueWordCloud from 'vuewordcloud';
        // index.js or main.js
        import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
        // index.js or main.js
        //import 'material-design-icons-iconfont/dist/material-design-icons.css' 

        export default {
            props: [],
            data() {
                return {
                    isLoading: false,
                    failed: false,
                    words: [['romance', 19], ['horror', 3], ['fantasy', 7], ['adventure', 3]],
                    progress: undefined,
                }
            },
            methods: {

                color([, weight]) {
                    return weight > 10 ? 'DeepPink' : weight > 5 ? 'RoyalBlue' : 'Indigo';
                },
                components: {
                    'vue-word-cloud': VueWordCloud
                },
            }
    </script>
...