2

In some CSS files I have import:

@import "../../../theme.scss"
@import "../../theme.scss"
@import "../../../../../../theme.scss"
@import "../theme.scss"

How to use relative path as absolute path everywhere for all cases:

@import "theme.scss"

My full angulr.json code is:

"reon-core": {
      "projectType": "library",
      "root": "projects/reon-core",
      "sourceRoot": "projects/reon-core/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["./projects/reon-core/src/lib/tssource/"]
            },
            "tsConfig": "projects/reon-core/tsconfig.lib.json",
            "project": "projects/reon-core/ng-package.json"
          }
        }

....It returns Data path "" should NOT have additional properties(stylePreprocessorOptions).;

POV
  • 11,293
  • 34
  • 107
  • 201

5 Answers5

4

Just add the path to the stylePreprocessorOptions in the angular.json file:

"architect": {
        "build": {
          ...
          "options": {
            ...
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/assets/style/theme"
              ]
            },
         },
         "test": {
           ...
           "options": {
             ...
             "stylePreprocessorOptions": {
               "includePaths": [
                 "./src/assets/style/theme"
               ]
             }
           }
         }
}

Then you should be able to include your file like @import 'app-theme.scss';

Update after description changed

I suppose you set the wrong relative path. Your root folder should be reon-core. Therefore you need to set the stylePreprocessorOptions like that:

"includePaths": ["./src/lib/tssource/"]

in build and test

After you set this, you can put in any theme file there and like:

./src/lib/tssource/theme.scss and import it like @import 'theme.scss';

Ling Vu
  • 4,740
  • 5
  • 24
  • 45
  • So, if file theme.scss is located not in ./src/ should I specify path to this file from angular.json? – POV Jan 09 '20 at 10:46
  • 1
    I get the same error ` Can't find stylesheet to import.` – POV Jan 09 '20 at 10:50
  • is it path to directory or path to file css? "includePaths": [] ? – POV Jan 09 '20 at 10:51
  • 1
    `Data path "" should NOT have additional properties(stylePreprocessorOptions).` – POV Jan 09 '20 at 10:55
  • 1
    It must be in `/src` otherwise you have to change your source folder to bundle. – Ling Vu Jan 09 '20 at 11:02
  • it is located outside of src. it is library Angular /projects/lib/ – POV Jan 09 '20 at 11:09
  • it does not work, I hav tried to move scss to /src/assets/themes – POV Jan 09 '20 at 11:16
  • If it is outside of your source, it needs to be hosted somewhere. Otherwise it won't work when you later deploy it to a server or want to host it, since the build will just contain everything you bundled before and it won't have access to your localhost file system. – Ling Vu Jan 09 '20 at 11:36
  • @OPV Other than that. Double check your config. I use this in all of my projects (also in production) like that and it worked for me. – Ling Vu Jan 09 '20 at 11:39
  • Found it: Change `"includePaths": ["./projects/reon-core/src/lib/tssource/"]` to `"includePaths": ["./src/lib/tssource/"]` – Ling Vu Jan 09 '20 at 11:43
1

You can make this by adding to your tsconfig.json {compilerOptions: {path: HERE!!} }

"paths": {
  "core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
  "core-js/es6/*": ["node_modules/core-js/es/*"],
  "@swagger/*": ["src/app/_swagger/*"],
  "@swagger": ["src/app/_swagger/index.ts"],
  "@directives/*": ["src/app/_directives/*"],
  "@services/*": ["src/app/_services/*"],
  "@models/*": ["src/app/_models/*"],
  "@tables/*": ["src/app/tables/*"],
  "@tables_services/*": ["src/app/tables/services/*"],
  "@shared/*": ["src/app/shared/*"],
  "@language/*": ["src/app/_language/*"],
  "moment": [
    "node_modules/moment/min/moment.min.js"
  ]
}
Anton Skybun
  • 1,479
  • 8
  • 21
1

Assuming your theme.scss is located in src/styles/theme.scss or src/assets/styles/theme.scss.

Add this path to angular.json shown below

"stylePreprocessorOptions": {
   "includePaths": [
     "src/styles",
     "src/assests/styles"
  ]
}

Now you can import it directly using path @import 'theme.scss'

Sameer
  • 4,758
  • 3
  • 20
  • 41
1
        "stylePreprocessorOptions": {
          "includePaths": [
            "src/assets/styles",
            "src/assets/styles/theme.scss"
          ]

Edit for your path to style file from src/PATH/theme.scss than after rebuild your project restart I mean you can use it in your style like this @import "theme";

Anton Skybun
  • 1,479
  • 8
  • 21
1

If the shortened path does not work, try to build the project or restart the code editor e.g. VS Code.

tsconfig.json:

{
    "CompilerOptions": {
        "baseUrl": "src",
        "paths": {
            "@core/*": ["app/core/*"]
            "@services/*": ["app/services/*"]
        }
    }
    # ...
}

posts.component.ts:

import { SeoService } from '@core/seo.service.ts';
import { PostsService } from '@services/posts.service.ts';
Murat Yıldız
  • 11,299
  • 6
  • 63
  • 63