时间戳

首页 > 解决方案 > Laravel Vue 未考虑 Core-ui 样式

laravel - Laravel Vue 未考虑 Core-ui 样式

问题描述

我尝试在 laravel vue js 项目中集成 coreui 管理模板，我克隆了 coreui vue 管理模板并在运行时运行良好，然后我在我的 laravel vue js 项目中安装了 coreui 的所有依赖项，在我的 app.js 上我已经进口的coreui：

import CoreuiVue from '@coreui/vue'
Vue.use(CoreuiVue)

在我的组件上，我只是测试集成侧栏。下面的结果除外（这个是从 coreui vue admin 模板克隆的） 侧边栏 我的组件看起来像

<template>
<div class="c-app">$
    <CSidebar>
        <CSidebarBrand class="d-md-down-none" to="/">
            <CIcon 
                class="c-sidebar-brand-full" 
                name="logo" 
                size="custom-size" 
                :height="35" 
                viewBox="0 0 556 134"
            />
            <CIcon 
                class="c-sidebar-brand-minimized" 
                name="logo" 
                size="custom-size" 
                :height="35" 
                viewBox="0 0 110 134"
            />
        </CSidebarBrand>
        <CRenderFunction flat :content-to-render="$options.nav"/>
    </CSidebar>
</div>
</template>

<script>
import nav from '../component/containers/_nav';
export default {
    nav,
    computed: {
        show () {
            return this.$store.state.sidebarShow 
        },
        minimize () {
            return this.$store.state.sidebarMinimize 
        }
    }
}

<style lang="scss">
@import '../../../assets/scss/style'; // this the scss style from core ui 
</style>

在我的 package.json 上有依赖项

"@coreui/coreui": "^4.0.1",
    "@coreui/icons": "^2.0.1",
    "@coreui/utils": "^1.3.1",
    "@coreui/vue": "^3.2.11",
    "@coreui/vue-chartjs": "^1.0.6",

我得到的结果是：结果

所以在 App.vue 上的克隆项目上，我测试了对 scss 导入的注释，我得到了与我的项目相同的结果，就像不考虑 style.scss 一样，我试图把所有的 css 代码（从 app.css 编译）在组件的样式上，但我得到了相同的结果。

标签： laravelvue.jscore-ui

解决方案

我刚刚遇到了与 CoreUI 相同的问题。最后我发现我和你一样使用 @coreui/coreui": "^4.0.1" ，但是所有的文档和示例都引用了库的 3.4 版本。安装这个版本解决了我的问题。

推荐阅读