如何为主题覆盖设置引导材料设计反应答案

【问题标题】：How to setup bootstrap-material-design react for theme overwrite如何为主题覆盖设置引导材料设计反应
【发布时间】：2019-10-01 19:39:20
【问题描述】：

我正在寻找一个新的 React 项目，我对使用 bootstrap-material-design 充满希望，但我不确定如何设置项目来覆盖主题。文档讨论了添加自定义 sass，但我不熟悉 sass。我希望有人知道你需要什么步骤才能完成这项工作。我已经使用 npx create-react-app 创建了一个全新的 react 应用程序，并通过 npm install bootstrap-material-design@4.1.1 使用 npm 安装了该软件包。我还在项目的根级别添加了一个scss 文件夹，该文件夹中有一个custom.scss 文件。目前添加到该文件的唯一代码是使用@import "node_modules/bootstrap/scss/bootstrap"; 导入他们的 sass 文件，但是当我添加诸如导航栏之类的材料设计组件时似乎没有任何反应。我还使用import './scss/custom.scss'; 将index.js 文件中的custom.scss 文件导入，但我仍然收到以下错误：File to import not found or unreadable: ../../node_modules/bootstrap/scss/bootstrap.

我想我的问题是有没有人通过使用 npm 安装而不是使用 cdn 在 react 项目中成功使用了这个包，如果是的话，他们可以告诉我启动和运行所需的步骤，以便我可以重新主题bootstrap-material-design 与我自己的品牌。

谢谢！

【问题讨论】：

标签： reactjs sass bootstrap-material-design

【解决方案1】：

安装所需的包
npm install bootstrap-material-design node-sass
添加 SASS 路径
打开.env，添加以下魔法
SASS_PATH=node_modules:src or SASS_PATH=./node_modules;./src for windows
将 App.css 重命名为 App.scss
打开 App.scss
添加以下代码：@import 'bootstrap-material-design/scss/bootstrap-material-design.scss';

到目前为止为我工作。

【讨论】：