Как добавить потрясающий шрифт с помощью шаблона ASP.NET.Core Angular

Я использую шаблон NET.Core 2.0 Angular, который работает с webpack, angular-cli, компонентом angular, typescript.

Я сделал:

командная строка — установить пакет и загрузчик

npm install --save font-awesome
npm install url-loader --save-dev

webpack.config.js — добавить правило загрузчика

    module: {
        rules: [
             ...
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" }
        ]
    },

my.component.css — импортировать в мой компонент

@import '~font-awesome/css/font-awesome.css';

my.component.html — поместить значок

<i class="fa fa-check fa-6"></i>

Теперь я не получил сообщения об ошибке, но по-прежнему не вижу значок.

Я сделал что-то не так?


webpack angular asp.net-core asp.net-core-2.0
person John_J    schedule 05.09.2017    source источник
comment
Это не имеет ничего общего с Angular или ASP.Net Core, это просто CSS. Вы не можете использовать ~ в импорте, попробуйте: @import '/font-awesome/css/font-awesome.css';   -  person DavidG    schedule 05.09.2017
comment
Я продолжаю получать эту ошибку Error: Cannot find module "-!../../../../node_modules/css-loader/index.js!./font-awesome/css/font-awesome.css" at webpackMissingModule, но с ~ все в порядке.   -  person John_J    schedule 06.09.2017

Ответы (3)


arrow_upward
11
arrow_downward

Это для .NET Core 2 после создания проекта SPA с использованием dotnet new angular:

  1. Перейдите в корень проекта и установите пакет: npm install font-awesome --save. Теперь вы должны увидеть его в package.json зависимостях.

  2. После этого перейдите к webpack.config.vendor.js и добавьте шрифт awesome в массив под модулями, не изменяющими структуру дерева:

    const nonTreeShakableModules = [
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'font-awesome/css/font-awesome.css',
    'jquery',
];

  3. Теперь нам нужно сообщить веб-пакету, что мы добавили этот новый пакет. Поэтому, если вы этого не сделали, установите это в корень проекта с npm install --save-dev npm-install-webpack-plugin.

  4. Наконец, запустите эту команду в корне проекта: webpack --config webpack.config.vendor.js

person dave o grady    schedule 09.09.2017
comment
Большое спасибо! Я рвал на себе волосы. Мне не нужно было делать шаг 3, только шаг 4. - person Paul Speranza; 30.11.2017
comment
К вашему сведению, мой комментарий выше относится к веб-пакету версии 2.5.1. - person Paul Speranza; 30.11.2017
comment
Мне пришлось установить веб-пакет глобально npm install -g webpack, чтобы #4 работал на меня. Мне также пришлось не забыть пересобрать приложение и нажать F5, чтобы увидеть изменения в браузере. - person RandomHandle; 22.12.2017
comment
Ни один из них не работал для меня. Я начал с нового углового шаблона. Я добавил запись .css в массив nonTreeShakableModules. Затем я выполнил шаг 3, который дал мне ошибку. Итак, я попробовал шаг 4 (с установкой глобального веб-пакета и без нее), и я получаю отсутствующий скрипт: webpack. - person K. Akins; 04.02.2018
comment
У меня нет webpack.config.vendor.js после dotnet new angular. Могу ли я просто сделать один? - person Perrier; 05.04.2018

arrow_upward
3
arrow_downward

Спасибо, ребята, за помощь~

В конце концов я решил проблему, обновив webpack.config.js до:

module: {
  loaders: [
    {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader"
    },
    {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader"
    }
  ]
}

а не помещать его в rules: [...]

Странно, что rules не работает... но тем не менее~ :P

person John_J    schedule 06.09.2017

arrow_upward
2
arrow_downward

Может быть, я единственный, кто установил классный шрифт, например npm install fontawesome --save? Ну, это должно было быть как npm install font-awesome --save. Черт возьми!

person Adam Cox    schedule 02.11.2017