从<style>内部使用SCSS @extend与全局scss导入

Question

使用vue-cli，我用Bootstrap和Bootstrap-vue创建了一个项目。

我创建了一个vue.config.js，并且正在使用prependData加载我的theme.scss文件，如下所示：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "./scss/theme.scss";`
      }
    }
  }
};

我的theme.scss：

@import '~bootstrap/scss/bootstrap-reboot.scss';

$theme-colors: (
  primary: #2D3047,
  success: #0FBD72,
  danger: #AE2029,
  light: #F6F5F3,
  dark: #23201B,
);

@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-vue/src/index.scss';

这使我可以按预期从vue组件使用<style lang="scss">时访问变量、函数和混合器。

但是，如果我尝试使用例如：

#foo {
  @extend .pt-5;
  color: var(--light)
}

如果不首先将@import "bootstrap";放在<style>标记的顶部，vue将抛出一个错误，说明它不能扩展.pt-5，因为类不存在。

因此，我的问题是:使用上述用于scss的全局导入，如何在组件<style>标记中使用<style>指令而不需要在每个组件的<style>标记中重新导入引导程序。

Answer 1

我觉得一切都很好。如果您确定路径./scss/theme.scss";，在vue.config.js文件中，我只能想到另外两件事，它们可以阻止您使用@extend，而无需导入style标记之上的scss文件。

theme.scss.中未导入

• -- pt-5实用程序类所在的文件

在对vue.config.js.进行更改后，没有停止服务器并重新启动服务器