npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gautamarora/sass-resolve

v0.1.0

Published

Resolves all sass files in current project and all dependencies to create on sourcemapped css file fromt them.

Downloads

12

Readme

sass-resolve build status

Resolves all sass files in current project and all dependencies to create on sourcemapped css file from them.

var sassResolve =  require('sass-resolve');
var path        =  require('path');

var projectPath =  path.join(__dirname, 'fixtures');

sassResolve(
    projectPath    
  , { inlineSourceMap: false }
  , function (err, res) {
      if (err) return console.error(err);
      console.log(res.css);
      console.log(res.map);
    }
);

Installation

npm install sass-resolve

Note

sass-resolve >= v2 generates css using libsass. This eases deployment (npm install is all you need) and compiles much faster (20x faster on our project) than Ruby sass.

If you run into problems and need to use Ruby sass, please npm install sass-resolve@1 and review the relevant docs (the API has changed somewhat).

API

package.json

In order for resolve-sass to be able to find your .scss files you need to specify an .scss entry file via the main.scss field in the package.json of each project that has .scss files.

The entry .scss file should specify an @import for each .scss file you want to include.

Example

// package.json
{
  [..]
  "main.scss": "sass/index.scss",
  [..]
}
// sass/index.scss
@import "foo";
@import "bar";

Please investigate these fixtures for more information.

To get a better understanding of what options to set, please consult these tests.

generated with docme

Examples

debug: true, inlineSourceMap: false, mapFileName: 'my.css.map'

Will generate source maps and inline the sources of all original files.

These source map is returned as res.map which you'll have to serve as /my.css.map.

debug: true, inlineSourceMap: true

Will generate source maps and instead of referring to a separate res.map. all source map data is inlined at the bottom of the css. Therefore you don't have to serve the source map, but keep in mind that now it adds to the size of the css loaded, so only use this option in development.

License

MIT