如何为主题覆盖设置bootstrap-material-design react

Question

我希望开始一个新的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主题。

谢谢!

Answer 1

1. 安装所需的软件包

npm install bootstrap-material-design node-sass

• Add SASS路径

打开.env，添加以下魔术

用于App.scss

• Open

• 的SASS_PATH=node_modules:src或SASS_PATH=./node_modules;./src将App.css重命名为windows App.scss

添加以下代码：@import 'bootstrap-material-design/scss/bootstrap-material-design.scss';

到目前为止，对我来说是可行的。