为什么 css 不适用于 vue 中一个应用程序的组件到另一个应用程序中答案

【问题标题】：Why css is not applied for a component of one app into another app in vue为什么 css 不适用于 vue 中一个应用程序的组件到另一个应用程序中
【发布时间】：2021-12-31 10:23:59
【问题描述】：

您好，我遇到css 和scss 未将1 app 的组件应用到另一个app 的情况

我有 2 个应用程序

核心
插件

我想将core 应用程序的组件用于plugins 应用程序

这就是我正在做的事情

核心应用

//main.js

import "bootstrap/dist/css/bootstrap.min.css";
const app1 = new Vue({
    render: h => h(App),
    ....
})

//core.component.vue

<template>
   .....
</template>
<script>
   export default{
       name:'CoreComponent',
       ....
    }
</script>
<styles lang="scss" scoped>
   $bgColor:red;   <--- these css are not applied when used in app 2
   ...             <--- these css are not applied when used in app 2
</styles>

Core 提供组件映射器，用于在向plugins 请求时提供组件。

//core-component-mapper.js

export default{
  CoreComponent: require('path/CoreComponent.vue').default,
}

在我的plugins 应用设置下方

import "bootstrap/dist/css/bootstrap.min.css";
import CoreComponentMapper 'path/core-component-mapper.js'

const app2 = new Vue({
    render: h => h(App),
    components:{
      FirstCoreComp: CoreComponentMapper.CoreComponent,
    },
})

注意：请忽略我的演示代码中的任何错误，代码在我的设置中完美运行除了 user defined css 未应用

问题：无论css 定义在app 1 的core 上，我在App 2 中使用时都不适用plugins

注意：我没有设置任何webpack 配置我猜我的两个vue 应用程序都使用默认vue-loader 配置

有趣的是bootstrap css 工作不知道为什么。（它在apps 中都使用过）

@MatJ 正如您在其中一条评论中所问的那样，我附上了屏幕截图（根据我的说法，css 未合并，但内联 css 应用得很好） p>

请帮助我提前谢谢！

【问题讨论】：

您为样式标签添加了scoped 属性。这意味着样式仅适用于组件内部，vue 将生成必要的包装代码以确保样式不会泄漏到其他部分。您可以检查项目并查看。删除 scoped 属性表单样式标签，它会在组件显示后立即工作。
@MatJ 建议您用答案来回答问题，而不是在 cmets 中 :) 尤其是在这里，等待着 50 便士的赏金！
@MatJ，无论您说什么都是正确的，但在core app 即App1 内是必需的，以免与其他样式混淆。是否有任何解决方法而不更改 scoped 属性。是故意放的。
@Sebastian，写答案很费时间，我必须保持它的清洁和高质量。在 cmets 中帮助某人快速提示不是。欢迎任何有足够耐心将我的 cmets 转换为答案的人这样做。这正是我所期望的。
@EaBengaluru Here is an illustration

标签： vue.js webpack vuejs3 vue-loader

【解决方案1】：

这里是 an article 正确解释了 Vue3 style 标签可用的所有解决方案。

在这里，您可以：

从你的style标签中删除scoped（这不是样式顺便说一句）
从应用中更高的另一个文件中注入一些全局 CSS
使用新的:global(.your-query-selector) selector。

【讨论】：

【解决方案2】：

看起来没有被应用的 css 在一个作用域块内：

<style lang="scss" scoped>

这正是 vue 中作用域 css 的工作方式。

如果您希望有一个共同的共享样式，只需将您需要的变量放在一个单独的 .css 文件中，然后像使用引导 css 一样导入它。

【讨论】：

或删除scoped。另外，它是style 而不是styles。