htmlcsssasslesscss-resources

How to Split up sass file


Lets say for example that I have HTML file with , and , how can I split up my css file into multiple files with each file containing styling for each of the tags. In other words, can I have header.scss, main.scss and footer.scss files all transpiling to a styles.css file? How can I do that? I don't want to have a long styles.css file that may become very difficult to maintain in the future.

I have tried wrapping the styles for the and using the @use to bring it into the styles.scss file but it is not working


Solution

  • change your file names:_header.scss, _main.scss and _footer.scss

    You can import them all in a style.scss:

    @import './header';
    @import './main';
    @import './footer';
    

    and compile that into a css file containing all the scss files in one