在节点中使用 SASS 继承引导类

Question

我想通过使用 SASS inheritance 将 Bootstrap CSS 添加到我自己的子元素中：

nav > a {
  @extend: .nav-item;
  @extend: .nav-link;
}

我使用 Node 和 webpack 进行捆绑。我已经安装了bootstrap-sass，但我似乎无法让@import 'bootstrap' 工作。我得到的只是File to import not found or unreadable: bootstrap。 webpack代码的sass部分是：

module: {
  loaders: [
  ....,
  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('css!sass'),
  }],

我想这一定是我错过的一些微不足道的事情。 SASS 无法访问该库并不奇怪，但我还没有找到任何关于如何将库直接提供给 SASS 的好的提示。

Answer 1

到目前为止，我确实没有您在设置和其他方面所做的事情。简单来说，如果你使用的是从 bootstrap 官网下载的 SASS 文件，你可以在自己的代码文件中使用它们的 mixins、变量和扩展代码。虽然它需要对文件进行正确的项目设置并以正确的方式导入它们。

在共享代码中，@extend 的语法似乎是错误的。我展示了一个虚拟代码 sn-p 用于演示目的。

// code already written inside Bootstrap source file.
.nav-item {
  background:red;
}
.nav-link {
  color: #fff;
}

// your code 
.nav > a {
  @extend .nav-item;
  @extend .nav-link;
}

您可以使用http://www.sassmeister.com/website 进行反复试验。

这是编译时的样子。