在引导程序中更改原色不起作用

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中引导导入之后导入此文件

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

组件/应用程序.jsmain.scss自定义.cssindex.jsApp.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")
);