如何设置引导材料设计对主题覆盖的反应



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

我想我的问题是,是否有人通过使用 npm 安装而不是使用 cdn 在 react 项目中成功使用了这个包,如果是这样,他们可以告诉我启动和运行它所需的步骤,以便我可以用我自己的品牌重新主题引导材料设计。

谢谢!

  1. 安装所需的软件包
    npm install bootstrap-material-design node-sass
  2. 添加 SASS 路径
    打开.env,为窗口添加以下魔术
    SASS_PATH=node_modules:srcSASS_PATH=./node_modules;./src
  3. 将 App.css 重命名为 App.scss
  4. 打开应用程序.scss添加
    以下代码:@import 'bootstrap-material-design/scss/bootstrap-material-design.scss';

到目前为止,为我工作。

最新更新