Webpack doesn't watch for stylus changes

[antonskyba]

I have set of *.styl files that are imported into app.styl. When I change something in the app.styl, Webpack reflects that change in a browser instantly, but Webpack ignores changes in those Stylus files until I edit app.styl or rerun 'npm run dev'. How to make it watch all the stylus files?

[petervmeijgaard]

Hi @antonskyba,

I tried recreating the issue that you're facing, but it seems that it's working at my end.
Can you provide me with a bit more information?
How are you importing the other stylesheets in the app.styl?
Can you share your code on how you do it?
What operating system are you using?
Can you provide me the version of node, npm and/or yarn?

I've tried the following. I've made a file in the src/assets/stylus-directory named test.styl.
I've included that file in the app.styl-file in the same directory`:

// src/assets/stylus/app.styl

@import './test.styl';

// src/assets/stylus/test.styl

* {
  outline: 1px solid #000
}

When I change the color of the outline to let's say #00F, the changes are reflected in the browser. Even if I add new rules to the test.styl file, the changes are picked up in the browser.

[antonskyba]

Thank you @petervmeijgaard for the feedback.
Just realised where is the problem: my imports contain Stylus variables, like that:
@import $components-path + 'Navbar/navbar.components'
Since Webpack doesn't understand Stylus variables it simply ignores such statements. So if I write import without variables, everything works as expected:
@import '../../components/Navbar/navbar.components'

[petervmeijgaard]

Hi @antonskyba,

Glad I could help and that you've figured it out!
If you want to, you can define the $compoments-path in your webpack configuration. This can be done in the build/webpack.base.conf.js-file.
This way you don't have to type long directory names and you can use the reload on safe functionality that webpack offers.

The only thing you have to keep in mind is that you need to use the variable as a NPM dependency. So if you'd create a alias, let's say @stylusComponentsPath, you can reference the path like this:
@import '~@stylusComponentsPath/Navbar/navbar.components';. Notice the tilde (~).

Hopefully this will help you!

[antonskyba]

@petervmeijgaard Thanks a lot! Will use that.