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

Question

我在 Visual Studio 2017 中使用 dotnet core 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 来自定义 bootstrap，使用这个 custom.scss 文件开箱即用，或者这是否需要额外的配置？

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

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

Answer 1

是否可以使用 bootstrap mixins 来自定义 bootstrap，使用这个 custom.scss 文件开箱即用，还是需要额外的配置？

Custom.scss 未使用，已从最新源中删除，请参阅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. 删除 package.json 文件中的 babel-eslint、eslint、eslint-config-react-app 和所有 eslint-plugin-* 依赖项（因为它们将由 npm 管理）
4. 将package.josn 中的react-scripts 依赖项更新为"react-scripts": "^2.0.0",
5. 运行npm i 安装依赖项

然后安装node-sass:

npm install node-sass --save

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

---

例如，让我们创建一个src/Custom.scss 文件并将primary 更改为darkgreen：

$主题颜色：（ “主要”：深绿色， ); // 正如@mutex 所建议的，最好通过`bootstrap/scss/bootstrap.scss` 引用 @import "../node_modules/bootstrap/scss/bootstrap"; @import "bootstrap/scss/bootstrap.scss";

要启用此配置，请删除已编译的css 并将这个新的scss 文件导入src/index.js：

导入'bootstrap/dist/css/bootstrap.css'; 导入“./custom.scss” 从“反应”导入反应； 从 'react-dom' 导入 ReactDOM； 从 'react-router-dom' 导入 { BrowserRouter }； 从'./App'导入应用程序； 从'./registerServiceWorker'导入registerServiceWorker； ...

您会发现primary 颜色已更改为darkgreen：