Support ignoring files (esp. during --watch)

[rshk]

My problem: Emacs creates lockfiles, named something like .#filename.scss, when the file is edited.

They're "broken" symlinks, pointing to a target like user@host.pid:timestamp, and they're automatically deleted once the file is saved. Unfortunately, picking them up causes the build process to choke with an ENOENT.
This didn't happen as often with node-sass, because it's broken and tends to fail picking up new files.

Some ways in which this could be solved:

1. Add an option to provide extra ignore patterns, eg. --ignore <regex> (or an environment variable perhaps?)
2. Just automatically ignore hidden files, along with _* files here: https://github.com/michaelwayman/node-sass-chokidar/blob/master/bin/node-sass-chokidar#L366 (I don't think anyone is interested in having them built anyways)
3. Just have chokidar ignore (globs) .* or .#*. They actually do that out of the box for a bunch of common temp files, see https://github.com/paulmillr/chokidar/blob/master/index.js#L349

Probably 2 or 3 are quicker to implement; I'd imagine you'd want to avoid having to maintain a huge list of all possible temporary files to be ignored, but I guess just ignoring hidden files would be a good compromise?

[michaelwayman]

Hmm. thanks for bringing this to my attention, I can see how this would be an issue.

I see how this can be an issue. They are all pretty good solutions.
I don't think #2 would work because _variables.scss is a common pattern, and node-sass and node-sass-chokidar both read these files in for the dependency graph, but we don't render the _* files out to _variables.css... I'm not a fan of "hidden magic" like in #3 so that leaves us with #1. I will try to patch this when I get time, I have just been swamped at work and other side projects. Feel free to open a PR, but I'll try to get around to it.

[liskicious]

(setq create-lockfiles nil) in emacs config file seems to work around this issue

[rshk]

Yep.. that’s what I’m using as a workaround atm, in a dir-locals file, but I do want lock files and other editor/tools might be creating other similar files etc.

[nikolas]

I've just ran into this issue as well (#40). I'd rather not turn off lockfiles. If I come up with another workaround I'll post it here.

[michaelwayman]

I released version 1.0.0 of node-sass-chokidar and there is a new option --match-regex where you can supply a regex and the files that don't match will be ignored. So this should fix you're problem if not feel free to reopen the issue.

[dosentmatter]

@michaelwayman I use git submodules in my project. I read the code and see that it only allows excluding by filename. Any chance we can allow excluding directories or a regex on the full path?

My git submodule is a project on its own that can have node_modules so the path to its node_modules is src/submodule/node_modules. I am trying to use this regex to exclude ^(?!node_modules).*$. I want to run node-sass-chokidar on all scss files in src but not src/submodule/node_modules.

[michaelwayman]

@dosentmatter I'm assuming you still want to be able to import the scss files from node_modules, but you just don't want to render them correct?

Like you want to be able to @import "node_modules/bootstrap/scss/bootstrap.scss"; but you don't want to actually render the bootstrap.scss inside node_modules?

[dosentmatter]

@michaelwayman, yeah I would still want to be able to import the scss files in node_modules from other scss files. I don't need to render the scss files to css files because I'm not planning to import them from javascript. Also, I'm using bootstrap, so the css files are already provided.

This is what I mean, with bootstrap installed in node_modules:

// file.scss

// I want to be able to do this.
@import 'bootstrap/scss/bootstrap.scss';

// file.js

// I don't want to generate this file or be able to import it from javascript.
import 'bootstrap/scss/bootstrap.css';

// If I need the css, I want to be able to import this.
import 'bootstrap/dist/css/bootstrap.min.css';

Now with a single project, this would be easy:

# build_sass.sh

#!/usr/bin/env sh

node-sass-chokidar \
  --include-path ./src \
  --include-path ./node_modules \
  ./src -o ./src \
  "$@"

I set the input folder as ./src. So it won't run node-sass-chokidar on ./node_modules. But the problem is that I have a git submodule located at ./src/submodule, with its own node_modules located at ./src/submodule/node_modules.

In this image, project A is the top level project, and project B is the git submodule. I get errors because project A's node-sass-chokidar is running on project B's node_modules and fails on node-sass and bootstrap scss.

I want to be able to build scss from project A, but skip project B's node_modules. The reasons I want to do this are to stop that error and to speed up build times.

The reason I have this project structure is because project B is a react-styleguidist repo of shared React components. But project B is also a standalone project that can run the styleguidist server (and thus having to install node_modules). Also, I am able to start project A's react-scripts webpack-dev-server and project B's styleguidist server at the same time. But starting styleguist requires node_modules in project B, causing the problem when starting webpack-dev-server.

I chose to have project B be a git submodule because project A and project B are meant to be developed in parallel. I could have added project B's git url to project A's package.json but I would have to update the commit hash manually, and I don't have git's power to manage local changes in project B.

I hope this gives enough background. Thanks!

[sprlwrksAprilmintacpineda]

If you prefix an underscore on the filename it would not be parsed but you can still import it on your other sass files like so:

/ root
| -- styles
|     | --_variables.sass
|     ` -- index.sass
` -- index.js

_variables.sass

$background: #006699

index.sass

@import './variables'

body
  background: $background

index.js

import './styles/index.css';

[dosentmatter]

@sprlwrksAprilmintacpineda, thanks for the response. Unfortunately, that won't work for me because the files I am trying to exclude are not under my control. They are from a node_modules folder in a nested git submodule.

[callain]

@dosentmatter Hello, we have exactly the same problem as you, did you find any solution ?

[dosentmatter]

@callain, sorry for the late response. My solution was just to build one scss file and not multiple files.

So compared to the file I posted above, I'm not building the whole src folder anymore. I'm only building ./src/index.scss. So then it won't go down into the submodule and build .scss in ./src/project-b/node_modules. If you have .scss that you need to build, just import it from ./src/index.scss. A negative of this is that you can't import the local (in the same folder) .css from your javascript since they aren't built from .scss. But a positive is that it kinda shows that your CSS is global and not scoped to your javascript file (unless you are using css modules or something).

# build_sass.sh

#!/usr/bin/env sh

node-sass-chokidar \
  --include-path ./src \
  --include-path ./node_modules \
  ./src/index.scss ./src/index.css \
  "$@"

This solution works fine for me because I am using styled-components for locally scoped CSS. Writing .scss for me is mostly just for global theming and bootstrap configuration. I have a method to convert the global theming bootstrap variables into a javascript object so they are available within styled-components.

I know this solution isn't ideal, but hopefully it can work for you. The only case I can think of that doesn't work is when you need to import locally scoped CSS like in css-modules, which you won't have access to in this solution since there will only be one index.css.

---

Other things you can try:

1. If the .scss files you are trying to exclude have unique filenames, you can try using --match-regex to specify an inverse match to exclude those files.
2. If you are using create-react-app: When I was setting up my project, react-app-rewire-sass was kinda abandoned. Now it has been deprecated and moved over to react-app-rewire-scss. Rewire allows you to modify create-react-app config such as webpack, jest, babel, etc. without ejecting. I haven't tried react-app-rewire-scss myself, but I've rewired other things successfully. Note that it also works for typescript - my project is in typescript. When create-react-app version 2 comes out, it will have opt-in support for sass, so you could just remove the rewire and switch over to CRA2.

I hope this helped!

[callain]

Ok your solution could work for us indeed, but will need to move all imports for all our components (100+) in a one .scss.

But since our submodule is only build when included in a project (at the moment), we didn't go for the package.json inside it.

Yesterday I've found an other solution which I didn't know about. You can add a dependency directly for a private repos.

It looks like this.

"dependencies": {
    "shared-ui-components": "git+ssh://git@github.com/MyCompany/shared-ui-components#master"
}

Doc here : https://docs.npmjs.com/files/package.json#git-urls-as-dependencies

In the middle of this page, its explained how npm and yarn manage this kind of dependencies and why this works better with yarn(not advocating for anything thougth).
https://codingwithspike.wordpress.com/2017/08/11/why-im-sticking-with-yarn/

Its not as convenient as a submodule because you need to yarn upgrade when you want to use your changes in your main project. But maybe it could work for you too ?

[dosentmatter]

@callain, yeah the only reason my solution works fine is because I don't have many .scss files.

I knew about the git dependencies, but decided not to use it. The reason was because I didn't want to have to make a commit to test changes in the top level project. I wanted to have local changes in both repositories, so I could test components in the top level project before pushing. Thanks for the suggestion though.