在 Webpack 中使用 @extend答案

【问题标题】：Using @extend in Webpack在 Webpack 中使用 @extend
【发布时间】：2018-07-12 07:24:11
【问题描述】：

我在我的 webpack 设置中使用引导节点包，并在我的入口点 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 是理所当然的。

【问题讨论】：

我认为 gulp-sass 在传递给 sass 的 data 选项中包含每个文件的源代码，从而使所有内容都可以全局访问。

标签： webpack sass bootstrap-4

【解决方案1】：

需要在./assets/scss/app.scss中直接导入bootstrap

【讨论】：