TrilonIO / aspnetcore-angular-universal

ASP.NET Core & Angular Universal advanced starter - PWA w/ server-side rendering for SEO, Bootstrap, i18n internationalization, TypeScript, unit testing, WebAPI REST setup, SignalR, Swagger docs, and more! By @TrilonIO
https://www.trilon.io
MIT License
1.46k stars 435 forks source link

How do I import additional SCSS from new node modules? #724

Open jonasarcangel opened 5 years ago

jonasarcangel commented 5 years ago

I tried importing them in _styles.scss, like this:

@import '~font-awesome/scss/font-awesome.scss'; @import '~angular-bootstrap-md/scss/bootstrap/bootstrap.scss'; @import '~angular-bootstrap-md/scss/mdb-free.scss';

But I get errors during build:

ERROR in ./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) Module not found: Error: Can't resolve '../img/svg/arrow_right.svg' in '...'

I tried adding resolve-url-loader in webpack.addition.js, but it didn't work: 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' } ];