将SASS Bootstrap导入React

Question

我按照Bootstrap文档https://getbootstrap.com/docs/4.0/getting-started/download/#npm中的说明操作，并通过Webpack安装了Bootstrap。然后我想导入css样式，就像这里的https://getbootstrap.com/docs/4.0/getting-started/theming/，我遇到了一个问题:当我将这个导入(@import "node_modules/bootstrap/scss/bootstrap";)添加到我的custom.scss文件中并在控制台中订购sass --watch custom.scss:custom.css时，我得到了这两个错误：

     1) Error: Cannot find module
     "-!../../node_modules/css-loader/index.js?{"importLoaders":1}!../../node_modules/postcss-loader/lib/index.js??postcss!../../node_modules/bootstrap/scss"

     2)./src/tu_sassy/custom.css Module not found: Can't resolve
     '../../node_modules/bootstrap/scss' in
    '/home/zebra/Desktop/testowa/src/tu_sassy'

我的文件结构类似于Bootstrap文档，如下截图所示。

！有关更多信息，我需要补充的是，当我从custom.scss中删除这个导入时，一切都像一个魅力...AND一样，仍然可以重用并且不会损坏到原始引导样式表‘我自己的样式表’为什么？

​

​

​

​

​

​

Answer 1

一个简单的提示。如果你想在你的StackOverflow帖子中编写内联代码，可以在代码两边使用反引号(`)。这使得阅读你的帖子变得容易得多。

Sass有自己的功能，可以从节点模块导入。Webpack Sass加载器提供了~(代字号)前缀，以告知编译器应该解析node_modules文件夹之外的路径。

@import "~bootstrap/scss/bootstrap";

如果您在导入sass文件的node_modues中有包的依赖树，您也可以告诉Webpack Sass加载器包含用于解析路径的node_modules：

{
  loader: "sass-loader", // compiles Sass to CSS
  options: {
  includePaths: [
    join(dirname(module.filename), 'node_modules')
  ]
}