在Webpack中使用@extend

Question

我在我的webpack设置中使用bootstrap节点包，并在我的入口点app.js使用我的其他模块导入它，如下所示：

import 'bootstrap';
import 'font-awesome-loader';
import './assets/scss/app.scss';
console.log('Its working just fine!');

我的./assets/scss/app.scss文件导入其他.scss个文件，在这些文件中，我使用@extend扩展了引导程序.container类：

 .banner {

  @extend .container;

  &__logo-holder {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
  }

  // and so on ...
}

我在编译时遇到以下错误：

@extend .container;
         ^
      ".banner" failed to @extend ".container".
The selector ".container" was not found.

使用Webpack时是否可以使用@extend？我认为这是理所当然的使用gulp。

Answer 1

您需要直接在./assets/scss/app.scss

中导入bootstrap