Relative paths in scss files don't resolve using Angular-CLI

Post Reply
Posts: 61
Joined: 13 Dec 2017, 19:01

06 Jul 2018, 23:06

I've just converted my project from webpack to Angular-CLI. I've managed to get everything working except the import of the avalon theme.

The theme files are in the "src/assets" folder and are imported in "src/styles.scss" as follows:

Code: Select all

@import "~assets/theme/theme-blue.scss";
@import "~assets/layout/css/layout-blue.scss";
The problem is that none of the "../" relative paths in the scss files are resolving correctly. I get ng errors for the image files and font files which have those relative paths. Here is one of the errors (of many):
ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Driver> (Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\alex.florin\Documents\Visual Studio 2017\Projects\DriverApp\trunk\ClientApp\src\assets\sass\_fonts.scss:11:7: Can't resolve '../fonts/roboto-v15-latin-300.ttf' in 'C:\Users\alex.florin\Documents\Visual Studio 2017\Projects\DriverApp\trunk\ClientApp\src'
I can reproduce this even in the base Avalon project from the theme download by placing those same import statements in the styles.scss file

So what is the correct way to import the scss theme files when using angular-cli?

Posts: 467
Joined: 12 Sep 2017, 10:44

09 Jul 2018, 08:17

You can import the scss theme files in angular.json like;

Code: Select all

            "styles": [
              //other import
              "src/assets/theme/theme-blue.scss",  //your theme import

Post Reply

Return to “Avalon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests