我在 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%; 
    } 
} 

请您参考如下方法:

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-eslinteslinteslint-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:


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!