How do I Import a SCSS file in Atom to my HTML page?

Question

So I have a project I'm working on and I would like to use a new style sheet for a new HTML page. Instead of everything just being crammed into a <style> tag in my HTML I would like my ThingsToDo page to have a corresponding style page called ThingsToDo.scss. So how do I get my ThingsToDo.html file to use the styling in the ThingsToDo.scss file? My project is called Breathe Easy and this is how my project folders are laid out.

Breathe Easy has two folders one called public(holds all my HTML files) and another called src
src(holds my styles folder and my index.js file)

Breathe-Easy/public(public has all my HTML files including ThingsToDo.html)
Breathe-Easy/src/styles(all my scss files including ThingsToDo.scss)

So how would I go about letting my ThingsToDo.html file use the styles from ThingsToDo.scss?

Answer 1

HTML file can only process CSS, but not SCSS file. SCSS is pre-processor file of CSS. You need to use automation tools like Grunt, Gulp or Webpack to convert SCSS to CSS. It could run from background, watching the change of the selected SCSS, convert it to actual workable CSS file immediately whenever you change and save the SCSS file.

For more details how to configure these automation tools, there are a lot of tutorial videos on YouTube.

Answer 2

Alternatively you can install atom package, sass-autocomplete.
It would create minify css whenever you save a sass file.