.NET Core 2 и Font Awesome. Как скопировать веб-шрифты из node_modules в wwwroot при сборке? - PullRequest
Новая
       15

.NET Core 2 и Font Awesome. Как скопировать веб-шрифты из node_modules в wwwroot при сборке?

0 голосов
/ 30 октября 2018

Я пытаюсь выяснить, как установить Font Awesome через npm в мой веб-проект ASP.NET CORE 2.

Используя npm для загрузки Font Awesome, я обновил свой файл package.json следующим образом: "@fortawesome/fontawesome-free": "5.4.2"

Я могу без проблем добавить CSS в мой файл bundleconfig.json: 

{
    "outputFileName": "wwwroot/styles/forms.css",
    "inputFiles": [
      "node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css",
      "node_modules/timepicker/dist/jquery.timepicker.css",
      "node_modules/@fortawesome/fontawesome-free/css/all.css"
    ],
    "minify": {
      "enabled": false,
      "renameLocals": false,
      "adjustRelativePaths": false
    }
},

Это работает, и Font Awesome CSS правильно упакован. Связанный css-файл теперь находится по адресу:

[MySite.Web]\wwwroot\styles\forms.css

И в комплекте css в forms.css ищет Font Awesome шрифты так: 

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("../webfonts/fa-brands-400.eot");

Однако шрифты не работают, потому что мне нужна папка:

[MySite.Web]\node_modules\@fortawesome\fontawesome-free\webfonts

В моем каталоге wwwroot вот так:

[MySite.Web]\wwwroot\webfonts

Я использую Visual Studio Community 2017 (версия 15.8.5)

Итак, мой вопрос заключается в том, как в Visual Studio при создании веб-проекта копировать папку webfonts из node_modules в wwwroot? Это даже правильный подход?

1 Ответ

0 голосов
/ 30 октября 2018

Есть несколько подходов, которые вы можете использовать. На официальных документах их первая рекомендация - включить глобальную версию cdn файла стилей. Вы могли бы сделать это, вставив <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> в свой основной файл макета (очевидно, вы могли бы заменить версию 4.3.0 на последнюю версию. После этого вы удалили бы пакет font-awesome npm из вашего package.json и из вашего bundleconfig.json.

Если вы не хотите этого делать, хотите сохранить пакет npm и скопировать необходимые файлы, вы можете скопировать интересующие вас файлы с помощью сценария npm. Для этого вы должны создать в вашем файле package.json другой скрипт, который будет содержать логику для копирования файлов с потрясающими шрифтами, которые вам нужны, в wwwroot. Я думаю, как это сделать, возможно, выходит за рамки этого вопроса, но есть ряд пакетов npm, которые могут помочь с этим. copyfiles - один из таких пакетов, но есть и другие.

После этого Visual Studio может вызывать этот сценарий каждый раз при сборке проекта.

Вы можете сделать это одним из двух способов: Щелкните правой кнопкой мыши файл проекта в Visual Studio и выберите параметр Edit {ProjectName}.csproj, а затем добавьте следующие элементы в отображаемый XML-файл. 

  <Target Name="PostBuild" AfterTargets="PostBuildEvent">
    <Exec Command="npm run {NPM_SCRIPT_NAME}" />
  </Target>

В качестве альтернативы вы можете щелкнуть правой кнопкой мыши файл проекта в Visual Studio и выбрать параметр Properties.

Вам будет показан следующий экран. {NPM_SCRIPT_NAME} Перейдите на вкладку Build Events и введите npm run {NPM_SCRIPT_NAME}, как показано на рисунке.

...