为啥 css 不适用于 vue 中一个应用程序的组件到另一个应用程序中

Posted 2023-02-22

技术标签:

【中文标题】为啥 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 【参考方案1】：

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

在这里，您可以：

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

【讨论】：

【参考方案2】：

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