时间戳

首页 > 解决方案 > 在 Bootstrap 中更改原色不起作用？

css - 在 Bootstrap 中更改原色不起作用？

问题描述

我正在创建一个反应应用程序，并且我已经安装了 Bootstrap React。

我想改变原色，也就是蓝色，所以我去了bootstrap/scss/variable.scss

然后我更改了以下内容：

$blue: #445448 !default;

因此，改变所有$primary: $blue !default;

但是，原色给我蓝色？

我npm start再次停止了我的服务器，但没有任何效果。

标签： cssreactjsbootstrap-4

解决方案

您应该添加一个名为custom.scssexample 的文件并添加以下内容：

// override Bootstrap variables here
// override the primary Bootstrap color
$primary: #12a2f9;

@import "~bootstrap/scss/bootstrap"

请注意，您应该在实际引导导入之前添加变量覆盖。

main.scss并在or 中的 bootstrap 导入之前或之后App.js导入此文件index.js

编辑：假设这是您的项目根结构，请执行以下操作：

    成分/
    应用程序.js
    主文件
    自定义.scss
    index.js
    应用程序.test.js

您将在App.js示例中编写此代码：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
// This import contains the custom variables written above
import "./custom.scss";
// This import contains the actual scss code
import "./main.scss";

ReactDOM.render(
    <App />,
  document.getElementById("root")
);

推荐阅读