在dotnet核心react模板中的custom.scss中自定义引导程序

Question

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

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

它带有custom.scss文件和reactstrap。是否可以使用bootstrap mixins来使用现成的custom.scss文件来自定义bootstrap，还是需要额外的配置？

例如，我添加了以下内容，但这似乎无济于事：

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

Answer 1

  

是否可以使用bootstrap mixins使用此custom.scss文件自定义bootstrap，还是需要额外的配置？

Custom.scss未使用，并且已从最新来源中删除<​​/ strong>，请参见commit#66fd4be4d7f1635368c4386f432daa7a22363d58。有关更多详细信息，请参见discussion here

尽管未使用custom.scss，但是您可以使用内置的react-scripts轻松地自定义引导程序。如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. 将react-scripts中的package.josn依赖项更新为"react-scripts": "^2.0.0",
5. 运行npm i以安装依赖项

然后安装node-sass：

npm install node-sass --save

现在，您可以根据需要自定义引导程序。

---

例如，我们创建一个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并将此新的scss文件导入src/index.js：

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：