maoberlehner / node-sass-magic-importer

Custom node-sass importer for selector specific imports, module importing, globbing support and importing files only once.
MIT License
292 stars 28 forks source link

Globbing - partials inside globbed directory not being watched #195

Closed nuclearape closed 5 years ago

nuclearape commented 5 years ago

When I modify a partial inside a globbed folder a fresh style.css file isn't rendered.

My file structure looks like:

/folder
    _partial.scss

style.scss

My style.scss looks like:

@import 'folder/*':

If i then make an edit to _partial.scss nothing happens. If I rewrite my style.scss like this...

@import 'folder/partial':

...and make an edit to _partial.scss a fresh style.css is rendered.

My package.json is like this:

{
  "name": "nuclear_ape_theme",
  "version": "1.0.0",
  "description": "The Nuclear Ape Theme package.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "node-sass --watch scss -o ../nuclear_ape_gutenberg --output-style expanded --importer node_modules/node-sass-magic-importer/dist/cli.js",
  },
  "author": "Nuclear Ape",
  "license": "ISC",
  "dependencies": {
    "breakpoint-sass": "^2.7.1",
    "node-sass": "^4.12.0",
    "node-sass-magic-importer": "^5.3.2"
  }
}

and I start watching with npm run scss

maoberlehner commented 5 years ago

Duplicate of https://github.com/maoberlehner/node-sass-magic-importer/issues/178

See: https://github.com/maoberlehner/node-sass-magic-importer/issues/178#issuecomment-424271452

nuclearape commented 5 years ago

Sorry, but I don't think this is a duplicate of #178 - that appears to be a problem arrising from a conflict with sass-graph and node-sass-chokidar / chokidar. I don't use any of these in my build (tbh I've never heard of them).

As you can see from my dependencies all I have running on top of npm is node-sass, breakpoint-sass and your magic-importer. I can remove breakpoint-sass and I get the same result.

Am I missing something? Or, is there anymore info I can give you that would warrant re-opening this and investigating?

maoberlehner commented 5 years ago

It's not the exact same problem but is the exact same reason why it doesn't work.

node-sass uses sass-graph (https://github.com/sass/node-sass/blob/master/package.json#L70) to resolve all @import statements in your codebase in order to build a tree of all files it has to watch for changes. But sass-graph can't resolve glob strings so it does ignore your import statements and all files which are imported with the help of node-sass-magic-importer.

There are two ways around this. Either you open an issue / pull request in https://github.com/xzyfer/sass-graph to add support for custom importers. Or you use the approach I've described in https://github.com/maoberlehner/node-sass-magic-importer/issues/178#issuecomment-424271452

Thx!