Другой css путь к изображению для разработчиков и разработчиков

Question

Я использую angular и s css в приложении, и мне нужен другой путь для dev и prod. Использование другого файла s css file

background-image: url ($ imgPath + 'assets / map.png');

в основном моя переменная $ imgPath имеет значение '/' для dev и все работает нормально, но для pro я не использую forward sla sh, поэтому он установлен на '' (пусто). Проблема в том, что когда я собираю приложение для prod с помощью 'ng build --prod', оно выдает ошибку о том, что не может разрешить файлы png.

ERROR in Child compilation failed:
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: D:\ClientApp\src\app\components\board\board.
component.scss:8:26: Can't resolve 'map.png' in 'D:\ClientApp\src\app\components\board'

NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError: D:\ClientApp\src\app\components\board\board.component.scss:8:26: Can't resolve 'map.png' in 'D:\ClientApp\src\app\components\board'

   6 |   align-items: center;
   7 |   width: auto;
>  8 |   background-image: url("assets/map.png");
     |                          ^
   9 |   background-position: center;
  10 |   background-repeat: no-repeat;

Кажется, что у меня неверный вывод и это не сработает, но это не так. Я размещаю приложение в сторонней среде, и «/» вызывает неправильный путь в этой среде. Не уверен, что я использую лучшее решение, заменив файл s css в файле конфигурации angular, но, похоже, он работает, проблема в том, что сборка завершается неудачно, потому что жалуется на неправильный путь, который не является неправильным для того, что я хочу.

Есть предложения?

Answer 1

Когда вы используете относительный путь, Angular строит ваши изображения с помощью веб-пакета, и вам не нужна переменная.

Пример с относительным путем: background-image: url("~/assets/map.png");;

Когда вы используйте абсолютный путь, Angular скопируйте все папки ресурсов, и вам также не нужна переменная.

Пример с абсолютным путем: background-image: url("/assets/map.png");

Если ваше приложение не находится в root вашего домена вы должны использовать команду - deployUrl с ng build.

Answer 2

Вы можете настроить разные css файлы для каждой среды. Посмотри мои файлы

angular. json:

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
  "neo-assets-ngcli": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "build",
          "index": "src/index.html",
          "main": "src/main.ts",
          "tsConfig": "src/tsconfig.app.json",
          "namedChunks": true,
          "polyfills": "src/polyfills.ts",
          "assets": [
            "src/assets/fonts",
            "src/assets/js/settings.js",
            "src/assets/img",
            "src/assets/.htaccess",
            "src/assets/index.tpl",
            "src/favicon.ico",
            "src/assets/csv",
            {
              "glob": "**/*",
              "input": "./node_modules/leaflet/dist/images",
              "output": "assets/"
            }
          ],
          "stylePreprocessorOptions": {
              "includePaths": [
                "src/environments/scss-dev"
              ]
          }
        },
        "configurations": {
          "production": {
            "optimization": true,
            "outputHashing": "all",
            "sourceMap": {
              "hidden": false,
              "scripts": true,
              "styles": true
            },
            "extractCss": true,
            "namedChunks": false,
            "aot": true,
            "extractLicenses": true,
            "vendorChunk": false,
            "buildOptimizer": true,
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/environments/scss-prod"
              ]
          }
          }
        }
      },
      "test": {
        "builder": "@angular-devkit/build-angular:karma",
        "options": {
          "main": "src/test.ts",
          "karmaConfig": "./karma.conf.js",
          "polyfills": "src/polyfills.ts",
          "tsConfig": "src/tsconfig.spec.json",             
          "stylePreprocessorOptions": {
              "includePaths": [
                "src/environments/scss-dev"
              ]
          }
        },

      },
      "lint": {
        "builder": "@angular-devkit/build-angular:tslint",
        "options": {
          "tsConfig": [
            "src/tsconfig.app.json",
            "src/tsconfig.spec.json"
          ],
          "exclude": [
            "**/node_modules/**"
          ]
        }
      }
    }
  },
  "neo-assets-ngcli-e2e": {
    "root": "e2e",
    "sourceRoot": "e2e",
    "projectType": "application",
    "architect": {
      "e2e": {
        "builder": "@angular-devkit/build-angular:protractor",
        "options": {
          "protractorConfig": "./protractor.conf.js",
          "devServerTarget": "neo-assets-ngcli:serve"
        },
        "configurations": {
          "noserve": {
            "devServerTarget": ""
          }
        }
      },
      "lint": {
        "builder": "@angular-devkit/build-angular:tslint",
        "options": {
          "tsConfig": [
            "e2e/tsconfig.e2e.json"
          ],
          "exclude": [
            "**/node_modules/**"
          ]
        }
      }
    }
  }
},
"defaultProject": "neo-assets-ngcli",
"schematics": {
  "@schematics/angular:component": {
    "prefix": "",
    "styleext": "scss"
  },
  "@schematics/angular:directive": {
    "prefix": ""
  }
}

}

Посмотри атрибут includePaths в каждой среде.

Тогда у меня есть файл globalVars.s css в каждой папке. Каждый со своим путем.

И, наконец, в стилях.s css первая строка:

@ import "globalVars";