Настройка начальной загрузки в custom.scss в шаблоне реагирования ядра dotnet

Question

Я использую шаблон React для ядра подсети в Visual Studio 2017. Этот шаблон описан здесь:

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

Он поставляется с файлом custom.scss и реактивной полосой.Можно ли использовать загрузочные миксины для настройки начальной загрузки, используя этот файл custom.scss из коробки или это требует дополнительной настройки?

Например, я добавил следующее, но это, похоже, ничего не делает:

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

Answer 1

Можно ли использовать загрузочные миксины для настройки начальной загрузки, используя этот файл 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 file
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 <b>better to reference by `bootstrap/scss/bootstrap.scss`</b>
<strike>@import "../node_modules/bootstrap/scss/bootstrap";</strike>
<b>@import "bootstrap/scss/bootstrap.scss";</b>

Чтобы включить эту конфигурацию, удалите скомпилированный css и импортируйте этот новый файл scss в src/index.js:

<strike>import 'bootstrap/dist/css/bootstrap.css';</strike>
<b>import "./custom.scss"</b>
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: