Question

我有一个 nuxt 项目，我的项目 scss 结构是我有一个 main.scss，它是我的全局 scss 文件，用于变量和字体导入等。< /p>

我在作用域标签下的组件内部编写的主要 scss。

我的全局样式和引导程序似乎工作正常，但是当我尝试将 scoped styles 添加到我的组件中，它们会被引导程序覆盖。

例如，这是我的 navbar.vue 组件：

<style lang="scss" scoped>

  nav {
    padding: 3rem;
  }
</style>

组件引导元素工作正常，但我添加的 padding 被覆盖了。

这是我的nuxt.config：

  css: [
    // '@/assets/scss//bootstrap.css',
    '@/assets/scss/main.scss',
  ],
     modules: [
        ...
        'bootstrap-vue/nuxt'
      ],

      bootstrapVue: {
        bootstrapCSS: false,
        bootstrapVueCSS: false
      },

  styleResources: {
    scss: ['./assets/scss/*.scss']
  },

这是我的main.scss：

@import "variables";
@import "fonts";

@import "~bootstrap/scss/bootstrap.scss";

如果我删除 bootstrap.scss 导入，我当然会丢失引导程序样式，但是我在作用域组件中添加的样式可以工作。

Answer 1

据我所知，浏览器实际上并不支持属性 scoped。我记得，元素的状态更具实验性。因此，如果您使用范围样式，它们的优先级可能不会高于其他样式表。

也许你可以看看canIUse.com：
https://caniuse.com/?search=scoped

Bootstrap 覆盖作用域组件样式

1 个答案: