Question

我将资产图片保存在“ assets / images / icons”文件夹下，并且在我的style.scss文件中，规则如下：“ background：url（assets / images / icons / searchbox_magnifier.png）no-repeat＃f5f5f5;”但是在进行生产构建时，Angular会将所有这些文件复制到其根文件夹并根据其更改style.scss规则，例如“ background：url（searchbox_magnifier.png）”，请参见所附图片。

style.scss production build

如何避免该问题？

Answer 1

我有同样的问题。只需将路径从相对更改为绝对即可解决。
例如，
background-image: url("../../../assets/images/background.svg")
或
background-image: url("~src/assets/images/background.svg")

替换为
background-image: url("/assets/images/background.svg")。

它将解决您的问题

Answer 2

在您的.angular-cli文件中，找到：

"assets": [
   "assets",
   "favicon.ico"
]

作为默认设置。

根据./node_modules/@angular/cli/lib/config/schema.json，资产接受：

"assets": {
        "type": "array",
        "description": "List of application assets.",
        "items": {
          "oneOf": [
            {
              "type": "string"
            },
            {
              "type": "object",
              "properties": {
                "glob": {
                  "type": "string",
                  "default": "",
                  "description": "The pattern to match."
                },
                "input": {
                  "type": "string",
                  "default": "",
                  "description": "The dir to search within."
                },
                "output": {
                  "type": "string",
                  "default": "",
                  "description": "The output path (relative to the outDir)."
                },
                "allowOutsideOutDir": {
                  "type": "boolean",
                  "description": "Allow assets to be copied outside the outDir.",
                  "default": false
                }
              },
              "additionalProperties": false
            }
          ]
        },

因此，根据您的情况，请尝试更改为：

"assets": [
   ...
   {
      "glob": "**/*",
      "input": "./assets",
      "output": "assets/"
   }
 ]

或您希望他们在任何地方。

Answer 3

我面临着同样的问题。资产文件夹中的图像（如果用作CSS文件中的相对路径）将复制到目标构建的根目录。

如果CSS中的路径是绝对路径，则不是。使用绝对路径解决了@angry beaver的问题，只是因为他的应用程序已部署到他的Web服务器的根文件夹中。

请注意，如果在构建中使用--base-href，它将附加到CSS文件内的url中。因此，如果每个构建在另一个子文件夹中（例如，qa在根文件夹中，而生产在一个子文件夹中），那么进行构建就需要部署到不同的目标（qa / pre-prod等）成为一个问题。子文件夹）

Answer 4

从中删除所有CSS文件 “样式”：[ “ css的路径” ]

在angular.json文件中。

在index.html中添加所有这些css文件引用

css中引用的图像，如果该css文件被捆绑，则所有这些图像都将复制到build文件夹中。

Angular将图像复制到其根文件夹

4 个答案: