# I'm interested in using Aurelia with SASS

**URL:** <https://discourse.aurelia.io/t/im-interested-in-using-aurelia-with-sass/3949>\
**Category:** Help Requests\
**Created:** [December 28, 2020, 8:53pm UTC](https://discourse.aurelia.io/t/im-interested-in-using-aurelia-with-sass/3949 "2020-12-28T20:53:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![wfd2018](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/wfd2018/32/1966_2.png) [@wfd2018](https://discourse.aurelia.io/u/wfd2018)\
**Post date:** [December 28, 2020, 8:53pm UTC](https://discourse.aurelia.io/t/im-interested-in-using-aurelia-with-sass/3949/1 "2020-12-28T20:53:16Z")

</div>

What is the best method of using this with scss?

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [December 29, 2020, 3:51am UTC](https://discourse.aurelia.io/t/im-interested-in-using-aurelia-with-sass/3949/2 "2020-12-29T03:51:29Z")

</div>

Have you tried to use the Aurelia CLI then choose SASS on the question of which styling to use? I use SASS (.scss) with Aurelia and WebPack without any issues.

---

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [December 30, 2020, 5:14pm UTC](https://discourse.aurelia.io/t/im-interested-in-using-aurelia-with-sass/3949/3 "2020-12-30T17:14:39Z")

</div>

Right. 🙂 But perhaps it may not be clear that you first have to choose “Custom Project”. Then you get a lot of additional options, including one for the CSS preprocessor to use: none, LESS, SASS or Stylus.

In my case, I had to add SASS support afterwards to my project. For that, I created two new project skeletons: a default one (without CSS preprocessing) and one with SASS for CSS preprocessing. Using my favorite compare tool on the two generated `webpack.config.js` files, I knew exactly how to manually patch my project’s `webpack.config.js` file (and the `packages.json` file for the additional SASS-related dependencies).

---

<div class="post-metadata">

**Author:** ![mobilemancer](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mobilemancer/32/1429_2.png) [@mobilemancer](https://discourse.aurelia.io/u/mobilemancer)\
**Post date:** [January 2, 2021, 6:40pm UTC](https://discourse.aurelia.io/t/im-interested-in-using-aurelia-with-sass/3949/4 "2021-01-02T18:40:45Z")

</div>

I wrote two posts about Aurelia and SASS a few years ago, they might be of use?  
See [https://mobilemancer.com/2016/10/19/aurelia-spa-typescript-dotnet-core/](https://mobilemancer.com/2016/10/19/aurelia-spa-typescript-dotnet-core/)  
and [https://mobilemancer.com/2016/11/25/how-to-style-an-aurelia-spa-with-sass/](https://mobilemancer.com/2016/11/25/how-to-style-an-aurelia-spa-with-sass/)

If you get any questions please feel free to ask 🙂