我在 Visual Studio 2017 中使用 dotnet 核心 React 模板。此模板记录在此处:
它带有一个 custom.scss 文件和 reactstrap。是否可以使用开箱即用的 custom.scss 文件使用 bootstrap mixin 来自定义 bootstrap,或者这是否需要额外配置?
例如,我添加了以下内容,但这似乎什么也没做:
@include media-breakpoint-down(md) {
.btn-block-md {
display: block;
width: 100%;
}
}
请您参考如下方法:
Is it possible to use bootstrap mixins to customize bootstrap using this custom.scss file out go the box or does this require extra configuration?
Custom.scss
未使用,已从最新源中删除</strong>,参见 commit#66fd4be4d7f1635368c4386f432daa7a22363d58 .有关详细信息,请参阅 discussion here
虽然未使用 custom.scss
,但您可以使用内置的 react-scripts
轻松自定义 Bootstrap 。作为the official documents描述,您需要将 react-scripts
依赖项更新为 @2.0.0
及更高版本。
注意最新的react-scripts
需要依赖 eslint
, babel-eslint
等,不要尝试手动管理这些依赖,让 npm 管理它们:
- 删除
package-lock.json
(不是package.json
)和yarn.lock
文件 - 删除项目文件夹中的
node_modules
。 - 删除
babel-eslint
、eslint
、eslint-config-react-app
和所有eslint-plugin-*
package.json
文件中的依赖项(因为它们将由 npm 管理) - 将
package.josn
中的react-scripts
依赖更新为"react-scripts": "^2.0.0",
< - 运行
npm i
安装依赖
然后安装node-sass
:
npm install node-sass --save
现在您可以根据需要自定义 Bootstrap 。
例如,让我们创建一个src/Custom.scss
文件并将primary
更改为darkgreen
:
$theme-colors: ( "primary": darkgreen, ); // as suggested by @mutex, it's better to reference by `bootstrap/scss/bootstrap.scss`@import "../node_modules/bootstrap/scss/bootstrap";@import "bootstrap/scss/bootstrap.scss";
要启用此配置,请删除已编译的 css
并在 src/index.js
中导入此新的 scss
文件:
import 'bootstrap/dist/css/bootstrap.css';import "./custom.scss" import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; ...
您会发现 primary
颜色已更改为 darkgreen
: