Как короткий путь к файлу в Angular? - PullRequest
Новая
       5

Как короткий путь к файлу в Angular?

0 голосов
/ 09 января 2020

В некоторых CSS файлах, которые я импортирую: 

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

Как использовать относительный путь как абсолютный путь везде для всех случаев: 

@import "theme.scss"

Мой полный англ. json код: 

"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"
          }
        }

.... Возвращает Data path "" should NOT have additional properties(stylePreprocessorOptions).;

Ответы [ 4 ]

1 голос
/ 09 января 2020 
        "stylePreprocessorOptions": {
          "includePaths": [
            "src/assets/styles",
            "src/assets/styles/theme.scss"
          ]

Отредактируйте свой путь к файлу стиля с src/PATH/theme.scss, чем после перезапуска проекта, перезапустите. Я имею в виду, что вы можете использовать его в своем стиле, как эта @import "theme";

1 голос
/ 09 января 2020

Просто добавьте путь к stylePreprocessorOptions в файле angular.json: 

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

Тогда вы сможете включить свой файл как @import 'app-theme.scss';

Обновление после изменения описания

Полагаю, вы указали неверный относительный путь. Ваша папка root должна быть reon-core. Поэтому вам нужно установить stylePreprocessorOptions следующим образом: 

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

в build и test

После установки вы можете вставить туда любой файл темы и :

./src/lib/tssource/theme.scss и импортируйте его как @import 'theme.scss';

1 голос
/ 09 января 2020

Предполагая, что ваш theme.scss находится в src/styles/theme.scss или src/assets/styles/theme.scss.

Добавьте этот путь к angular.json , показанному ниже 

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

Сейчас Вы можете импортировать его напрямую, используя путь @import 'theme.scss'

1 голос
/ 09 января 2020

Вы можете сделать это, добавив в свой 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"
  ]
}
...