在 <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)
}

如果不先在我的 <style> 标签顶部添加 @import "bootstrap";，vue 将抛出一个错误，指出它无法扩展 .pt-5，因为 class 不会”不存在。

所以，我的问题是：使用上面的 scss 全局导入，如何在组件 <style> 标签中使用 @extend 指令而不需要重新导入 bootstrap每个组件的 <style> 标签。

Answer 1

我觉得一切都很好。如果你确定你的路径 ./scss/theme.scss";，在 vue.config.js 文件中，我只能想到另外两件事，这可能会阻止你使用 @extend，而不导入 scss 文件style 标签上方

pt-5 实用程序 class 所在的文件未导入到 theme.scss。
您没有在对 vue.config.js 进行更改后停止并重新启动服务器。

在 <style> 中使用 SCSS @extend 进行全局 scss 导入

Using SCSS @extend from within <style> with global scss import

sass

vue.js

bootstrap-4

bootstrap-vue