#node.js #angular #webpack #sass
#node.js #angular #webpack #sass
Вопрос:
У меня есть приложение Angular 7, созданное с использованием стартового набора под названием ASPNet Core Angular Universal, и я хотел бы использовать файлы SCSS из нескольких модулей node (Bootstrap, Font Awesome и MDBootstrap.) Я попытался импортировать их в один файл scss, используемый в app.component, например:
@import '~font-awesome/scss/font-awesome.scss';
@import '~angular-bootstrap-md/scss/bootstrap/bootstrap.scss';
@import '~angular-bootstrap-md/scss/mdb-free.scss';
Но я получаю ошибки во время сборки:
ОШИБКА в ./ClientApp/app/app.component.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js!./ClientApp/app/app.component.scss ) Модуль не найден: Ошибка: не удается разрешить ‘../img/svg/arrow_right.svg’ в ‘…’
Я попытался добавить resolve-url-loader в webpack.addition.js , но это не сработало:
const sharedModuleRules = [
// sass
{
test: /.scss$/,
loaders: ['to-string-loader', 'css-loader', 'resolve-url-loader', 'sass-loader']
},
// font-awesome
{ test: /.(woff2?|ttf|eot|svg)$/, loader: 'url-loader?limit=10000' }
];
Комментарии:
1. Я не думаю, что это рекомендуемый способ создания font awesome с помощью Angular. Они выпустили библиотеку Angular и модуль, чтобы значки размещались в пакете и их можно было перемещать по дереву. fontawesome.com/how-to-use/on-the-web/using-with/angular
2. Что касается ошибки, я думаю (если я правильно рекомендую), вам нужно настроить переменные font awesome, чтобы он знал, куда загружать ресурсы, прежде чем вы его импортируете. fontawesome.com/how-to-use/on-the-web/using-with/sass#compile
3. Спасибо. Я удалю импорт font-awesome. Я проверю, существует ли аналогичное решение для Bootstrap и MDBootstrap.