Ionic 2.0.0-beta.24 如何在没有 ionic.config.js 的情况下导入 node_module css 文件

Posted 2023-03-06

【中文标题】Ionic 2.0.0-beta.24 如何在没有 ionic.config.js 的情况下导入 node_module css 文件

【英文标题】：Ionic 2.0.0-beta.24 how can i import node_module css files without ionic.config.js

【发布时间】：2016-07-28 12:27:13

【问题描述】：

我正在尝试使用 ionic 2.0.0-beta.24 和 Leaflet 0.7.7 设置一个基本的 ionic 2 传单应用程序。使用

启动默认项目后

ionic start test --v2 --ts

如果您打开ionic.config.js 文件，您将看到消息

Ionic CLI is no longer responsible for building your web assets, and now
relies on gulp hooks instead. This file was used for exposing web build
configuration and is no longer necessary.
If this file is executed when running ionic commands, then an update to the
CLI is needed.

If your version of the Ionic CLI is beta.21 or greater, you can delete this file.

在较早版本的 ionic 2 中，您可以像这样将要包含在此文件中的目录：

sass: 
  src: ['app/theme/app.+(ios|md).scss'],
  dest: 'www/build/css',
  include: [
    'node_modules/ionic-framework',
    'node_modules/ionicons/dist/scss',
    'node_modules/leaflet/dist'
  ]
,

现在我想这不是一个选项，那么我该如何引入我需要的 css 样式表，因为在 app.core.scss 中执行 @import "leaflet"; 会出错，因为它找不到文件夹。

任何帮助将不胜感激。因为我可以使用 Leaflet js 库。

npm install --save leaflet
typings install --ambient --save leaflet

地图正在加载没有问题，但瓷砖被打乱，这表明 CSS 表未加载。如果我在其中放入样式表链接，它可以正常工作，但我宁愿不必依赖 CDN。

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> 

谢谢。

【问题讨论】：

***.com/questions/32265121/…的可能重复

【参考方案1】：

所以仅仅发布这个问题就让我开始追踪ionic gulp sass-build task的文档。

他们提供的示例很有帮助。如果我从以下位置更新第 55 行附近的默认 gulpfile.js 代码：

gulp.task('sass', buildSass);

到

gulp.task('sass', function()
  return buildSass(
    sassOptions: 
      includePaths: [
        'node_modules/ionic-angular',
        'node_modules/ionicons/dist/scss',
        'node_modules/leaflet/dist'
      ]
    
  )
);

它解决了我的问题。我还需要在需要传单 css 的页面中调用 @import "leaflet"。