Import directory on the same level with module

[ViieeS]

I have a problem when I try to import bootstrap mixins like this: @import ~bootstrap-sass/assets/stylesheets/bootstrap/mixins. Because _mixins.scss and mixins/ directory are located on the same level:

+--mixins/
|
+--_mixins.scss

I think we need to check the module first, then directory with index.scss or module-name.scss.

[jkrehm]

I just ran into this. The easiest fix is to tack .scss onto the import. However, that is not necessarily intuitive unless you look at the code in index.js. I didn't realize that would resolve it until I was looking in the code to fix it there. This is what I came up with to fix it:

  var hasNoExtension = !path.extname(filePath);

  if (hasNoExtension) {
    var modulePath = path.resolve(path.dirname(filePath), '_' + path.basename(filePath) + '.scss');
    if (fs.existsSync(modulePath)) {
      return modulePath;
    }
  }
  
  if (hasNoExtension && fs.existsSync(filePath)) {
    return path.resolve(filePath, 'index');
  }

  if (fs.existsSync(path.dirname(filePath))) {
    return filePath;
  }

It does make the assumption that the file will have a leading underscore since that is the standard in SCSS, e.g. _mixins.scss.

[kumorig]

I'd also like to add, that I'd expect @import "~bulma"; to resolve "node_modules/bulma/bulma.sass", and even @import "~bulma-calendar"; to resolve "node_modules/bulma-calendar/dist/bulma-calendar.sass".

Traversing all directories is probably impractical, but the popular ones like dist and src should be doable. I believe this is expected because it's similar to how node's require work. e.g. require('jquery'); resolves node_modules/jquery/dist/jquery.js. (edit: Oh, I suppose require is using the main property from package.json ?)

[jpickwell]

Relates to, or duplicate of, #5.

[rootical]

A package import with tilde should be resolved to the main key in package.json as it does in all the node ecosystem including webpack's loaders for css and scss. https://github.com/webpack-contrib/sass-loader/blob/e279f2a129eee0bd0b624b5acd498f23a81ee35e/lib/loader.js#L42

[hbobenicio]

You not always are importing the main file from a package. Sometimes you want to @import a specific file.

I think this kind of package should interfere as least as possible with the sass resolution system.

I think the correct behaviour for this is just to replace the beginning '~' with the immediate parent node_modules directory, and let the rest of the import resolution be handled by the sass compiler.

BTW, that's exactly what the description of this repo states: "A node-sass custom importer which turns ~ into absolute paths to the nearest parent node_modules directory."

But unfortunately that's not what the current version of this package is doing... (which causes incompatibilities with bootstrap for example)