vue scss 范围不适用于根元素

【问题标题】：vue scss scope does not work for root elementvue scss 范围不适用于根元素
【发布时间】：2019-10-04 02:44:32
【问题描述】：

我在根元素上有一个带有 b-modal 的组件。

<template>
  <b-modal ref="mymodal" modal-class="my-modal">

在 scss 上我定义了一些边距

<style lang="scss">
  .my-modal {
    margin-top: 100px;

这按预期工作，但如果我限定我的 scss

<style lang="scss" scoped>
  .my-modal {
    margin-top: 100px;

它不起作用，子元素应用了所有 css 但根元素没有。

【问题讨论】：

标签： vue.js sass

【解决方案1】：

使用作用域，父组件的样式不会泄漏到子组件中成分。但是，子组件的根节点会受到父级的范围 CSS 和子级的范围 CSS。这是由设计以便父可以设置子根元素的样式以进行布局目的。

因此，由于不会在子组件根节点上设置“modal-class”，因此您必须使用深度选择器（https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors）

/deep/ .my-modal {
    margin-top: 100px;

【讨论】：