将SASS Bootstrap导入React

Question

我遵循Bootstrap文档https://getbootstrap.com/docs/4.0/getting-started/download/#npm中包含的说明，并通过Webpack安装了Bootstrap。         然后，我想在此处https://getbootstrap.com/docs/4.0/getting-started/theming/导入css样式，然后         我遇到了一个问题：         当我将此导入(@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删除此导入时，所有内容都像魅力一样...而且仍然可重复使用，并且不会损坏原始的Bootstrap样式表“我自己的样式表”，为什么？

Answer 1

一个快速提示。如果要在StackOverflow帖子中编写内联代码，请在代码周围使用反引号（`）。这使阅读您的帖子变得容易得多。

Sass具有从节点模块导入的功能。 Webpack Sass加载器提供〜（波浪号）前缀，以告知编译器应从node_modules文件夹解析路径。

@import "~bootstrap/scss/bootstrap";

如果在node_modues内具有导入sass文件的软件包的依赖树，则还可以告诉Webpack Sass加载程序包括用于解析路径的node_modules：

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