Laravel Vue 未考虑 Core-ui 样式答案

【问题标题】：Core-ui styles not considered on Laravel VueLaravel Vue 未考虑 Core-ui 样式
【发布时间】：2021-10-23 02:37:31
【问题描述】：

我尝试在 laravel vue js 项目中集成 coreui 管理模板，我克隆了 core ui vue admin template 并在运行 serve 它运行良好，然后我在我的 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），但我得到了相同的结果。

【问题讨论】：

标签： laravel vue.js core-ui

【解决方案1】：

我找到了问题所在， @coreui/vue 提供带有前缀'c-' 的类，而@coreui/coreui 提供没有该前缀的类样式，因此 coreui 提供的样式对 coreui vue 组件没有影响。我希望 vue 上的未来 coreui 用户发现这对他们有所帮助。

【讨论】：

【解决方案2】：

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

【讨论】：