在 Bootstrap 中更改原色不起作用？ [关闭]

Question

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

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

然后我更改了以下内容：

$blue: #445448 !default;

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

但是，原色还是给我蓝色？

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

Answer 1

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

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

@import "~bootstrap/scss/bootstrap"

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

并在main.scss 之前或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")
);