角。如何从node_modules

时间:2017-12-27 15:40:45

标签: angular node-modules angular-components

我正在使用角度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中引用文件夹吗?我该怎么办?

2 个答案:

答案 0 :(得分:6)

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

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

答案 1 :(得分:5)

无需像这样添加。在angular-cli.json文件中添加样式标记和脚本路径

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

从组件中删除脚本

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