开发和生产的不同 css 图像路径

Question

我在一个应用程序中使用 angular 和 scss，我需要一条不同的路径用于开发和生产。使用不同的 scss 文件

背景图片：url($imgPath + 'assets/map.png');

基本上我的 $imgPath 变量对于 dev 的值为 '/' 并且一切正常，但对于 pro 我不使用正斜杠，所以它设置为 ''（空）。问题是，当我使用 'ng build --prod' 为 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;

似乎我的输出错误，它不起作用，但事实并非如此。我在第 3 方环境中托管应用程序，而“/”在该环境中导致路径错误。 不确定我是否通过替换角度配置文件中的 scss 文件来使用最佳解决方案，但似乎可行，问题是构建失败，因为 in 抱怨错误的路径对我想要的来说并没有错。

有什么建议吗？

Answer 1

您可以为每个环境配置不同的 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.scss 文件。每个人都有自己的道路。

最后，在 styles.scss 的第一行：

@import "globalVars";

Answer 2

当您使用相对路径时，Angular 会使用 webpack 构建您的图像，并且您不需要变量。

相对路径示例：background-image: url("~/assets/map.png");;

当您使用绝对路径时，Angular 会复制所有资产文件夹，并且您也不需要变量。

绝对路径示例：background-image: url("/assets/map.png");

如果您的应用程序不在您的域的根目录中，您必须使用--deployUrl 命令和ng build。