[Question] How do you make Rollup to watch for changes in sass partials with this?

[soulchainer]

I have already thrown hours into this and I can't figure it out.
This plugin works great with rollup-watch when you change the main .scss file, which you are importing in your index.js (or whatever your entry point is), but... how you make it to rebundle when you change something in any of your partials?

If you modularize your sass, maybe you don't edit your main.scss file at all. Mine is just a list of @import sentences... So, I import only this file and it calls all the partials. But... it only rebundles if you change the main scss file, so... it renders a bit useless/frustrating.

I guess you're using it and, I hope, you're using partials, so, how you do it?

Any help, please? Thanks :D.

---

My package.json important part looks like this:

"main": "build/js/bundle.js",
  "scripts": {
    "dev": "rollup -c --watch",
    "reload": "browser-sync start --server 'build' --files 'build'",
    "start": "npm-run-all --parallel reload dev",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

In rollup.config.js my rollup-plugin-css is:

scss({
      outputStyle: 'compressed',
      output: 'build/styles/bundle.css',
    }),

And, of course, in my index.jsx I have:

import '../styles/main.scss';

[thgh]

In the project I'm using this for, index.jsx is kind of the main.scss, so it contains most of the imports. The imported files don't contain other imports. But I see your usecase, but I would recommend to not include your styles like that. Instead use node-sass => node-sass -w -r. And only include specific styles into your components. Actually, personally I'm not a fan of mixing css and js.

Now, to solve your situation, it would be interesting to see if the sass compiler returns a list of imported files and if it's possible to add these as modules such that rollup-watch can watch them. Do you have any idea about that?

[soulchainer]

Ups. Sorry, I redacted an answer to this a few days ago, for I forgot to send it ^_^U.

You helped so much with that answer, thanks!

In fact, one of my problems was caused by certain part of the README, that drove me to a misunderstanding. I'm talking about this part:

Usage

// entry.js
import './reset.css'

I understood here: «You need to import your styles in your JavaScript entry file with this plugin».
But just after read your comment, I realized (and tried it) that... I can import my .scss files... in any JavaScript file and it will update the bundle.css :D. So perfect.

So now I ended with an folder structure where I have a folder for each component and in that folder I have the proper .jsx file and the .scss specific to that component.

So, actually, at least to this simple exercise/project, I'm not even using partials, because organizating the SCSS this way, I don't need it.

When I need to do something more complex, maybe I will need partials for it, and yet, solve this problem. But, for now, I'm good ;).

And yes, obviously, there was the node-sass choice... but the idea was to integrate it with Rollup, if possible, instead of using it directly. But you are right: sometimes is good to keep up with the KISS principle, I guess :þ.

Many thanks again, @thgh 👍 . And sorry again for my delay :(.

Note: if I deal with this situation in the future and get it solved, I will tell you (if I remember :þ).

[cpiber]

A somewhat dirty solution is to use the provided watch option, something like this: watch: glob.sync('src/**/*.@(sa|sc|c)ss'). Of course this will watch all files. But that's also how you'd do it in grunt/gulp...
It should also be possible to extract the list of included files from the compilation result (see my #69)