Question

我启动了一个角度为4的项目并使用less而不是css配置它：

npm install less --save

声明的文件较少 .angular-cli.json，如：

"styles": [
        "my-style.less",
        "styles.css"
      ],

在这样的组件中：

@Component({
  selector: 'step-web',
  templateUrl: './web.component.html',
  styleUrls: ['./web.component.less']
})

web.component.less包含指向图像的链接。如果路径为false ng build或ng serve确实会出现错误，

但在浏览器中，永远不会处理样式：（而且我无法在开发者的酸性视图中找到相应的来源）

使用developpements工具，我可以看到目标节点但它不是由较少的指令处理：

可以从github克隆代码（commit 054d46231df06300245680726f2bd56f4ff203b0）

（例如未插入背景图片：

开发者工具中的DOM节点：

<step-web _ngcontent-c1="" _nghost-c5=""><div _ngcontent-c5="" class="step active present" data-rotate="90" data-scale="2" data-x="1500" data-y="2300" id="abe" style="position: absolute; transform: translate(-50%, -50%) translate3d(1500px, 2300px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg) scale(2); transform-style: preserve-3d;">
...
    <q><a>some</a></q>
...
    <div _ngcontent-c5="" class="abe"></div>
</div>
</step-web>

web.component.less：

step-web {
    #abe {
        text-align: center;
        .abe {
            width: 100%;
            height: 350px;
            background-image: url("~assets/img/abe.png");
            background-position: bottom center;
            background-repeat: no-repeat;
            background-size: 583px;
        }
    }
}

Answer 1

尝试以下方式：您必须在my-style.less文件

中声明图片网址

在你的my-stlye.less文件中：

// Images
$url_cart_white: url(/assets/cart_white.png);
$url_banner_img: url(/assets/banner.jpg)

web.component.less文件：

step-web {
    #abe {
        text-align: center;
        .abe {
            width: 100%;
            height: 350px;
            background: $url_cart_white;
            background-position: bottom center;
            background-repeat: no-repeat;
            background-size: 583px;
        }
    }
}

上述方法只是一种尝试方式。最终而不是background-image尝试background。

角度减少4个文件，但不包括在内

1 个答案: