asp.net-core - 在 dotnet 核心 react 模板中的 custom.scss 中自定义 Bootstrap

Question

我在 Visual Studio 2017 中使用 dotnet 核心 React 模板。此模板记录在此处:

https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-2.2&tabs=visual-studio

它带有一个 custom.scss 文件和 reactstrap。是否可以使用开箱即用的 custom.scss 文件使用 bootstrap mixin 来自定义 bootstrap，或者这是否需要额外配置？

例如，我添加了以下内容，但这似乎什么也没做:

@include media-breakpoint-down(md) {
    .btn-block-md {
        display: block;
        width: 100%;
    }
}

Answer 1

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 管理它们:

1. 删除package-lock.json(不是package.json)和yarn.lock文件
2. 删除项目文件夹中的 node_modules。
3. 删除 babel-eslint、eslint、eslint-config-react-app 和所有 eslint-plugin-* package.json 文件中的依赖项(因为它们将由 npm 管理)
4. 将 package.josn 中的 react-scripts 依赖更新为 "react-scripts": "^2.0.0",<
5. 运行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: