How to use SCSS as styling language in custom VuePressTheme


Is is possible to use SCSS instead of stylus in a custom VuePress theme?

There isn’t much in the docs about it except for a small mention in the config reference which is probably for using SCSS in SFCs.

Simply putting an index.scss file in styles directory of the theme does not seem to produce any results.

How do you use SCSS as the default styling language in a custom VuePress theme?


FWIW I wondered this as well, but couldn’t find any resources on it.

Eventually, I decided to see how difficult it was to use Stylus and I was up and running in a fraction of the time it took me to Google how to implement SCSS.

Not only that, Stylus is so similar to SCSS you won’t notice the difference, it requires less typing, and I now have a skill I didn’t have before.

I’m not sure what your reasons are for using SCSS over Stylus, but why don’t you have a go and see if you feel the same?



The VuePress site is to accompany another site. I’ve got an established set of styles that I’d like to use across both apps without having to maintain two separate style collections.


I get it :stuck_out_tongue:

Please share if / when you find out!


I had the same problem but I have just added the node-sass and sass-loader dev dependencies and it is working

I am uing tge vuepress version 1.0.0-alpha.23


What does directory structure look like?

I just installed the latest vuepress and added node-sass and sass-loader and it still doesn’t work.