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">时，这使我可以访问变量，函数和mixins。

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

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

在我的@import "bootstrap";标记顶部没有<style>的情况下，会抛出一个错误，指出它不能扩展.pt-5，因为该类不存在。

所以，我的问题是：使用以上针对scss的全局导入，如何在组件@extend标记中使用<style>指令，而无需在每个组件的{{1}中重新导入引导程序}标签。

Answer 1

一切对我来说都很好。如果您确定路径./scss/theme.scss";，在vue.config.js文件中，我只能想到另外两件事，那就是您可能无法使用@extend而不导入scss文件style标签上方

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

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

1 个答案: