可能是新手问题(从 REACT 开始),但我无法在新引导的 React 应用程序中更改主题颜色。
我读了一些答案,但不幸的是,它们对我不起作用。
我有以下入口点:
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './components/App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import './styles/app.scss';
ReactDOM.render(<App />, document.getElementById('app'));
并且我在
app.scss
中有 src/styles
样式表:
@import '_settings.scss';
@import '_base.scss';
@import './components/_header.scss';
我尝试在这里更改主题颜色,但似乎没有任何作用:
@import "node_modules/bootstrap/scss/bootstrap";
$theme-colors: (
"primary": #991196,
"danger": #ff4136
);
有人可以向我指出这是如何工作的,因为我遇到的所有答案和教程似乎都使用不同的方法。
我正在使用以下版本的 Bootstrap:
"bootstrap": "^4.0.0"
首先参考这个,Bootstrap webpack
这是在reactjs项目中使用bootstrap的一种方式。
您正在通过执行此操作导入 bootstrap css 的编译版本
import 'bootstrap/dist/css/bootstrap.min.css'; //Dont do this
相反,你应该这样做
在您的 app.scss 文件中,
首先定义你的颜色
$primary: #13C7CD;
$danger: #red;
然后
导入scss版本的bootstrap
@import '~bootstrap/scss/bootstrap';
~
表示 webpack 将在 node_modules
中搜索它
在此导入主js文件中的app.scss文件(可以是index.js或app.js)
import './styles/app.scss';
这是如何工作的
当您在导入 bootstrap scss 之前定义颜色变量时, 生成的已编译 css 将具有您的颜色值
对于Vite用户,请在
vite.config.js
中添加以下内容
const path = require('path')
export default {
root: path.resolve(__dirname, 'src'),
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
server: {
port: 8080,
hot: true
}
}
然后在SCSS文件中
@import "~bootstrap/scss/bootstrap";
您可以完全在
app.scss
文件中进行覆盖和导入 Bootstrap。重要的是,在主题颜色更改后导入 Bootstrap 以覆盖 bootstrap _variables.scss 中定义的 !default 主题颜色。
@import '_settings.scss';
@import '_base.scss';
@import './components/_header.scss';
/* import only the Bootstrap files needed for customizations */
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
/* make the customizations */
$theme-colors: (
"primary": #991196,
"danger": #ff4136
);
/* import bootstrap to set changes */
@import "node_modules/bootstrap/scss";
当构建react应用程序并编译SASS时,生成的CSS将包含您的自定义和Bootstrap,这样您就不需要在react中单独导入bootstrap。
演示: