2

I am looking at a site at the moment which uses SASS to compile its CSS file. All styling references appear to be referencing the styling from the SCSS file, rather than the CSS file. Previously, all references pointed to main.css, but now points to the .scss file where the class is defined. Moving the .scss file on the server, or changing the filepath for the folder doesn't seem to stop it loading. My concern is that the site is now loading the multitude of .scss files rather than a single, minimized, .css file. Can anyone offer any insight on what is going on here?

The site is http://spiffingcovers.com/

1 Answer 1

1

The references to .scss files are just to help you find and debug any changes you would like to make - the browsers developer tools are trying to help you by pointing you at the relevant file.

If I 'view source' of your home page I can see that only main.css is loading :)

5
  • 1
    Thank you! That makes a lot more sense than looking for a way to make it load the SCSS rather than the CSS!!! Is it a relatively new feature that browser inspectors load the reference to the relevant file, rather than the CSS reference? When this site was completed back in October, everything just pointed at main.css.
    – Wychwood
    Commented Mar 30, 2016 at 16:16
  • I'm not sure how new the feature is but it's been very useful! One of our team members showed it to me recently! As far as I know, browsers cannot make use of .scss files directly, which is why they need to be compiled into .css - glad you're OK man - welcome to the community too!
    – Matt P
    Commented Mar 30, 2016 at 16:19
  • 1
    Thank you for the welcome, and for the help. I was getting very confused with it all, since everything I found said that browsers can't use scss files directly! It is a pretty nice feature, though. Makes updates a lot more simple!
    – Wychwood
    Commented Mar 30, 2016 at 16:29
  • 1
    You have probably activated the generation of a sourcemap in the scss compilation stage.
    – megatrond
    Commented Mar 30, 2016 at 17:31
  • 1
    Just remove /*# sourceMappingURL=main.css.map */ in main.css for production. Depending on how you're compiling your sass, there should be an option there too not to generate the source map. Commented Mar 30, 2016 at 21:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.