Angular 6 - Less CSS' import is not working an

Question

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 component:

@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:component": {
      "styleext": "less"
    }
  },
  "architect": {
    "build": {
      "options": {
        "styles": [
          "src/styles.less",
          "app/shared/less/styles.less"

---

However the line

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

… compiles with an error:

Failed to compile.
./src/app/shared/component/some.component.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?

Answer 1

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/...'