CODEWITHSUNDEEP
csstypescriptsassleafletionic2
Brad Aune
Brad Aune

Reputation: 31

Ionic 2.0.0-beta.24 how can i import node_module css files without ionic.config.js

I am trying to setup a basic ionic 2 leaflet app using ionic 2.0.0-beta.24 and leaflet 0.7.7. After starting the default project with

ionic start test --v2 --ts

if you open the ionic.config.js file you will see the message

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.

In older versions of ionic 2 you would put the directories you would want to include in this file like this:

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'
  ]
},

Now i guess that isn't an option, so how do i bring in the css stylesheet i need, because doing @import "leaflet"; in app.core.scss errors out because it can't find the folder.

Any help would be greatly appreciated. I am able to use the Leaflet js library because i did.

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

The map is loading without an issue, but the tiles are scrambled which is a sign the css sheet is not loaded. If i put in a stylesheet link in it works without an issue, but i would prefer not to have to rely on a CDN.

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

Thanks.

Upvotes: 1

Views: 1237

Answers (1)

Brad Aune
Brad Aune

Reputation: 31

So just by posting this question it made me start tracing the documentation for ionic gulp sass-build task.

The example they provide was a great help. If I update the default gulpfile.js code around line 55 from:

gulp.task('sass', buildSass);

to

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

It solves my issue. I also needed to call @import "leaflet" in the page that needed the leaflet css.

Upvotes: 2

Related Questions