有角度的。如何从 node_modules 导入 css答案

【问题标题】：angular. How to import css from node_modules有角度的。如何从 node_modules 导入 css
【发布时间】：2018-06-08 06:09:18
【问题描述】：

我正在使用 angular 5。我的模块我正在使用传单 1.2.0。

在leaflet.css 中我遇到了图片问题，例如，一些css 行：

.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url(/assets/images/leaflet/layers-2x.png);
  background-size: 26px 26px;
}

/* Default icon URLs */
.leaflet-default-icon-path {
  background-image: url(/assets/images/leaflet/marker-icon.png);
}

所以，我需要访问leaflet.css 到它的相对路径，我尝试了什么：

@Component({
  selector: 'myComponent',
  template:`<div id="myId" class="myClass"></div>`,
   styleUrls: ['./myComponent.component.scss','/../../../../node_modules/leaflet/dist/leaflet.css'],
})

文件夹结构：

--project_folder
  --node_modules
     --leaflet
         --dist
           --leaflet.css
  --src
    --app
      --myComponentParent
        --myComponent
          --myComponent.component.ts
          --myComponent.component.scss
          --myComponent.component.html

我可以引用 src 之外的文件夹吗？我该怎么做？

【问题讨论】：

标签： angular node-modules angular-components

【解决方案1】：

如果您使用 Angular CLI，则需要将 Leaflet CSS 文件添加到 .angular-cli.json 中包含的样式数组中，并从其他地方删除 css 导入

"styles": [
         "styles.css",
        "../node_modules/leaflet/dist/leaflet.css",
]

【讨论】：

自 Angular +6 以来，.angular-cli.json 已被 .angular.json 文件替换。
如果我想在特定组件的 .scss 中导入它怎么办

【解决方案2】：

不需要这样添加。在您的 angular-cli.json 文件中添加带有脚本路径的样式标签

"styles": [
        "../node_modules/leaflet/dist/leaflet.css",
]

从你的组件中移除脚本

styleUrls: ['./myComponent.component.scss'],

【讨论】：