lucasmotta/sass-module-importer

Simple importer for node-sass to import npm and bower modules

sass-module-importer's Issues

Can't run tests

sass-module-importer(master*)$ npm test

> [email protected] pretest /Users/dangreen/github/sass-module-importer
> npm run lint && npm run build


> [email protected] lint /Users/dangreen/github/sass-module-importer
> eslint src/index.js test.js


> [email protected] build /Users/dangreen/github/sass-module-importer
> rollup -c

Path must be a string. Received undefined
TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.resolve (path.js:1148:7)
    at resolveId$1 (/Users/dangreen/github/sass-module-importer/node_modules/rollup-plugin-node-resolve/dist/rollup-plugin-node-resolve.cjs.js:44:15)
    at /Users/dangreen/github/sass-module-importer/node_modules/rollup/www/ROLLUP/rollup/src/utils/first.js:10:31
    at tryCatch (/Users/dangreen/github/sass-module-importer/node_modules/rollup/www/ROLLUP/rollup/node_modules/es6-promise/lib/es6-promise/-internal.js:185:12)
    at invokeCallback (/Users/dangreen/github/sass-module-importer/node_modules/rollup/www/ROLLUP/rollup/node_modules/es6-promise/lib/es6-promise/-internal.js:197:13)
    at publish (/Users/dangreen/github/sass-module-importer/node_modules/rollup/www/ROLLUP/rollup/node_modules/es6-promise/lib/es6-promise/-internal.js:168:7)
    at flush (/Users/dangreen/github/sass-module-importer/node_modules/rollup/www/ROLLUP/rollup/node_modules/es6-promise/lib/es6-promise/asap.js:87:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
Type rollup --help for help, or visit https://github.com/rollup/rollup/wiki

Not finding files with parent and child node_modules folders

I'm trying to use this plugin with material web components but it's not able to find any files.

Here is my project structure:

parent-package
  node_modules
  packages
    my-package
      node_modules
        material-components-web
          material-components-web.scss
      src
        frameworks
          material
            material.scss

I'm trying to import material-components-web.scss into material.scss

Is it possible it's looking in the wrong node_modules for it?

Support include paths

When using include paths in combination with this importer the include paths are simply ignored.

When looking into how include paths could be supported I ran into the same issue as mentioned in #13: That one then would also have to add logic that looks for all valid variations of a Sass file to be able to step through each and every include path as well as the local path to figure out if a file is available or not.

Solving this would involve looking for these file names:

• name.scss
• name.sass
• _name.scss
• _name.sass

And doing so first locally and then on each and every include path until one either finds a file or finds no file.

Reference in Sass docs: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import

Add support for multiple importers

Hey, I was trying to use two of your importers as an array of functions like the specs say:

importer: [globImporter(), moduleImporter()]

But it didn't work, only the first importer handled the import and so throwing an error when couldn't handle the import.
Reading the node-sass docs I found that you could return null if you want the next importer to handle it.

importer can be an array of functions, which will be called by LibSass in the order of their occurrence in array. This helps user specify special importer for particular kind of path (filesystem, http). If an importer does not want to handle a particular path, it should return null. See functions section for more details on Sass types.

Here is the PR with more info about it.

I would have done it but I don't know how to go about it, should you return null in every case or should you check if this.options.importer is an array and is not last and stuff...

How would you go about it?

js:next cause problems when linted with eslint-plugin-import

This issue is connected with import-js/eslint-plugin-import#1636

It occurs that having js:next set in package.json without distributing target of that key to npm is not handled well by eslint-plugin-import.

From what I understand sass-module-importer should either distribute src/index.js or get rid of js:next key from package.json.

How can I use 'style' or 'sass' fields in package.json?

In my case, I want to use style or sass fields in my package.json to point module entry sass file. How could I implement this with sass-module-importer?

FYI: https://www.npmjs.com/package/node-sass-package-importer this package have a option pacakgeKeys which can help developer to use custom fields.

Nested dependencies overwritten

In our code base we have the following layout:

node_modules/module1/_base.scss
node_modules/module1/lib/_settings.scss
node_modules/module2/_base.scss
node_modules/module2/lib/_settings.scss

When module1 does @import "lib/settings" all is well, but when module2 does @import "lib/settings" it gets the settings from module1.

Handle "sass" key in project definitions.

Bootstrap 4, for instance, provides a style key (the built CSS file) and a sass key (the sass sources). As is, sass-module-importer includes the prebuilt css in this case.

how to specify what file to load from package.json file

Is there any way to specify what package.json field should take priority (main vs style) when trying to import a module?

I am trying to use sass-module-importer to import bourbon-neat but it's package.json file has both a main and style field... the main field pointing to a .js file which causes the following error:
Error: Invalid CSS

Not Working

Plugin Fails for me. The following results in empty file.

Gulp Task

var gulp = require("gulp");
var gSass = require("gulp-sass");
var gNotify = require("gulp-notify");
var moduleImporter = require("sass-module-importer");

gulp.task("sass", function(){
  return gulp.src(["main.scss"])
    .pipe(gSass({
      importer: [
        moduleImporter()
      ]
    }))
    .on("error", gNotify.onError())
      title: "SASS Compile Error",
      message: "<%= error.message %>"
    }))
    .pipe(gulp.dest(CONFIG.dist.styles));
});

main.scss

@import "normalize-scss";

NPM Package

Testing with: Normalize

How to use it with CLI?

Hi,

I'm using basic CLI and want to be able to use it but I don't find any word of it in the README.

How to handle a sass module import within a sass module import?

I recently published a bunch of reusable styles as a sass module on npm (and i have a project generator which creates a bunch of template files and imports that sass module using gulp-sass and sass-module-importer).

The thing is, that sass module is currently set up to depend on another sass module (breakpoint-sass). If I run my project generator, and npm install using npm >= 3.0.0 everything is groovy, since all the dependencies are installed at the the top level. But if I use an older version of npm, then breakpoint-sass ends up tucked away inside the folder where my custom sass module lives, and sass-module-importer can't find it.

The temporary fix I've done for now is just to add breakpoint-sass as a dependency within my project generator (that adds it to the top level dependencies, regardless of npm version). But I'm wondering if there's a real way to allow sass modules to depend on other sass modules...

(Hope that makes sense)

not require specific directory structure or keys in package.json

In LESS, if you require something from MODULE_NAME/dir/file.less it resolves to the npm path. I'd like the same thing in sass, so I can grab files directly from node_modules, without setting anything up or making the upstream project change their structure or package.json, like this:

@import "material-colors/dist/colors.scss";

It would resolve this issue so I could have inter-dependant modules that include each other's scss.

Handle arrays in "main:" value of bower.json

I've been scratching my head for the last 10 minutes trying to work out why this doesn't work with normalize.scss. Turns out, this particular module has an array as the main: file, instead of a string and .match doesn't work on arrays.

This is the line causing the issue is where it fails.

Example from susy:

"main": "sass/_susy.scss",

Example from normalize.scss

"main": [
    "sass/_normalize.scss"
],

I'm using the css library for the moment, but i'd rather the sass version.

sass-module-importer fails to import include-media

When using include-media installed by yarn, index.js is imported instead of proper .scss file.
console output for a sass file that begins with "@import include-media":

yarn sass
yarn sass v0.16.1
$ gulp sass 
[14:10:08] Using gulpfile ~/.../gulpfile.js
[14:10:08] Starting 'sass'...
[14:10:08] gulp-notify: [Sass error] Error in plugin 'gulp-sass'
Message:
    node_modules/include-media/index.js
Error: Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
        on line 1 of node_modules/include-media/index.js
>> var path = require('path');
   ^

Details:
    status: 1
    file: /home/.../node_modules/include-media/index.js
    line: 1
    column: 1
    formatted: Error: Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
        on line 1 of node_modules/include-media/index.js
>> var path = require('path');

Fails to import module with .js ending in name

Tried to load the styles of "lightgallery.js" (https://github.com/sachinchoolur/lightgallery.js). Didn't work until i renamed the module to something without .js ending.

Import module partials

I need a feature : allow to import module partials.

For example for foundation-sites:

@import
  'foundation-sites/grid/grid',
  'foundation-sites/typography/typography',
  'foundation-sites/forms/forms',
  ...

instead of (without sass-module-importer)

@import
  'bower_components/foundation-sites/scss/grid/grid',
  'bower_components/foundation-sites/scss/typography/typography',
  'bower_components/foundation-sites/scss/forms/forms',
  ...

You can search for these files from the path of the main file given by "main" or "style" of package.json/bower.json

For example, for foundation sites :

// bower.json
  ...
  "main": [
    "scss/foundation.scss",
    "dist/foundation.js"
  ],
  ...

-> Search in bower foundation-sites component directory + scss/ and dist/

Options to search different file structures or extensions?

Hi, I'm certainly new to NPM packages, but I'm noticing that by using sass-module-importer that the file/dir structure has to be pretty specific for the right *scss file to be found.

For instance, it looks like the file name must match the import command:
@import 'bulma'; => node_modules/bulma/bulma.sass

but this doesn't work:
@import 'font-awesome'; => node_modules/font-awesome/scss/font-awesome.scss
I have to put the full path in.

Another package has a structure like:
node_modules/sass-spacing/index.scss
And this also doesn't work unless I put the full path (minus the node_modules dir)

Do I misunderstand how this package interacts with node-sass? Or could we make it a bit more inclusive for different file/directory structures?

Thanks!!

use --importer example

Anyone have an idea of how to use sass-module-importer on the command line?
node-sass src/style.scss dest/style.css --importer ????