将 SASS Bootstrap 导入 React答案

【问题标题】：Importing SASS Bootstrap into React将 SASS Bootstrap 导入 React
【发布时间】：2019-01-12 14:48:27
【问题描述】：

我按照 Bootstrap 文档 https://getbootstrap.com/docs/4.0/getting-started/download/#npm 中包含的说明进行操作，并通过 Webpack 安装了 Bootstrap。然后我想在这里导入css样式https://getbootstrap.com/docs/4.0/getting-started/theming/ AND 我遇到了一个问题：当我将此导入 (@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 样式表“我自己的样式表”为什么？

【问题讨论】：

标签： reactjs webpack sass bootstrap-4

【解决方案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')
  ]
}

【讨论】：