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

Question

我想使用SASS Bootstrap将inheritance 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的语法似乎有误。我已经展示了一个用于演示目的的虚拟代码片段。

// 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/网站进行试错。

这是编译时的样子。