Add a css or less file to the sass task?


#1

I’m trying to implement the weather-icons font in my project. But I’m stuck because, unlike font-awesome, they use less. there is a pre-compiled css file however. Any clue how I can include it with the sass gulp task?


#2

If you don’t get any better answers, you could use webpack, at which point all you have to do is require the css file (or original less) somewhere (I use the file that bootstraps the app). If you have the following stanzas in webpack.config.js, either css or less is automatically handled:

      {
        test: /\.less$/,
        loader: 'style!css!less'
      },
      {
        test: /\.css$/,
        loader: 'style!css'
      },

If you need fonts or other types of resources in addition, you might be interested in this webpack HOWTO. I believe there are comments about how to officially swap browserify for webpack in this starter changes thread.


#3

Wut? Whey use sass too.


#4

It looks like they include Sass sources as well, so the process should be similar: https://github.com/erikflowers/weather-icons/tree/master/sass. I’m not sure if weather-icons are on npm however, so you may have to copy them from a path other than node_modules.

The other option, if you don’t need to compile them with Sass, would be to just copy the precompiled CSS into your www directory and load them in a link tag in your index.html.