asp.net-core - 在 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%;
    }
}

标签： asp.net-core

Answer 1

是否可以使用 bootstrap mixins 使用这个 custom.scss 文件自定义引导程序，或者这是否需要额外的配置？

未Custom.scss使用且已从最新源中删除，请参见commit#66fd4be4d7f1635368c4386f432daa7a22363d58。有关更多详细信息，请参阅此处的讨论

虽然custom.scss没有使用，但您可以使用内置的react-scripts. 正如官方文档所述，您需要将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：

$主题颜色：（
  “主要”：深绿色，
);

// 正如@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：