I wanted to re-use some structure from an Angular 5 project which uses Less. In this old project I could simply load .less files using this line from within a ponent:

@import '~app/shared/less/bootstrap';

This would load:

/my-app/src/app/shared/less/bootstrap.less

---

Now I have a blank Angular 6 project, which is also configured to use Less as a preprocessor:

ng new my-app --routing --style less

Extract from angular.json:

"my-app": {
  "prefix": "app",
  "schematics": {
    "@schematics/angular:ponent": {
      "styleext": "less"
    }
  },
  "architect": {
    "build": {
      "options": {
        "styles": [
          "src/styles.less",
          "app/shared/less/styles.less"

---

However the line

@import '~app/shared/less/bootstrap';

… piles with an error:

Failed to pile.
./src/app/shared/ponent/someponent.less
Module build failed:
@import '~app/shared/less/bootstrap';
^
'~app/shared/less/bootstrap' wasn't found.

I also tried:

@import '.app/shared/less/bootstrap';
@import '.src/app/shared/less/bootstrap';
@import '~app/shared/less/bootstrap.less';

… without any luck.

Did I forget to configue something?

I wanted to re-use some structure from an Angular 5 project which uses Less. In this old project I could simply load .less files using this line from within a ponent:

@import '~app/shared/less/bootstrap';

This would load:

/my-app/src/app/shared/less/bootstrap.less

---

Now I have a blank Angular 6 project, which is also configured to use Less as a preprocessor:

ng new my-app --routing --style less

Extract from angular.json:

"my-app": {
  "prefix": "app",
  "schematics": {
    "@schematics/angular:ponent": {
      "styleext": "less"
    }
  },
  "architect": {
    "build": {
      "options": {
        "styles": [
          "src/styles.less",
          "app/shared/less/styles.less"

---

However the line

@import '~app/shared/less/bootstrap';

… piles with an error:

Failed to pile.
./src/app/shared/ponent/some.ponent.less
Module build failed:
@import '~app/shared/less/bootstrap';
^
'~app/shared/less/bootstrap' wasn't found.

I also tried:

@import '.app/shared/less/bootstrap';
@import '.src/app/shared/less/bootstrap';
@import '~app/shared/less/bootstrap.less';

… without any luck.

Did I forget to configue something?

• javascript
• css
• angular
• less

Share Improve this question Follow edited Jun 26, 2018 at 11:40 lampshade asked Jun 26, 2018 at 11:26 lampshadelampshade 2,81677 gold badges4646 silver badges8989 bronze badges 6

• try to add extantion to you imports(like .js, .css) @import '.app/shared/less/bootstrap.less'; – לבני מלכה Commented Jun 26, 2018 at 11:49
• Thanks for your suggestion, @לבנימלכה. As mentioned in the quesiton - I already tried it without any luck, unfortunately. – lampshade Commented Jun 26, 2018 at 11:57
• see my answer please – לבני מלכה Commented Jun 26, 2018 at 11:57
• use / before app : @import './app/shared/less/bootstrap.less' – לבני מלכה Commented Jun 26, 2018 at 12:02
• @לבנימלכה Your idea was close. I got it working using the fully qualified path @import './src/app/ - including ./ and src. Thanks. Would you add this to your answer? – lampshade Commented Jun 26, 2018 at 12:14

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

In angular 6 you have to import all files to main(in your case src/styles.less) css file :

In angular.json put ONLY:

  "styles": [
          "src/styles.less"
]

In styles.less (import all files you want with / before app):

@import './app/shared/less/bootstrap.less';

See my answer to css here:Angular 6 load css folders in angular.json

To your edit ./src/app..:

@import './src/app/...'