I’m using the Slant theme from Acrontum. I was driving myself mad trying to change some CSS value until I inspected the HTML element in Chrome. It showed that the styles were coming from a .scss file and not .css. I found this odd since I’m not running Gulp or Webpack. In the attached image you’ll see how some body tag styles are coming from style.scss but I can’t find that file anywhere in my project (I used Sublime Text’s search function).
I’m not familiar with the particular theme you mentioned, but there may be a couple of different answers to your question, depending on what you need to do.
First, remember that just because a file has an extension ‘.scss’, it doesn’t mean that it is actually SCSS. The browser will (usually) load anything as a stylesheet, regardless of what extension it has - and some people use that to load server-side dynamically generated stylesheets, for instance, with PHP. Indeed, there is nothing in the code you pasted above that is non-standard CSS.
Now, there are indeed a few different ways to have your browser directly load pre-processor stylesheets, such as LESS/SCSS files.
LESS has an official in-browser interpreter, which you can load before loading your stylesheets. As you will see in their documentation, this is not ‘recommended usage’, mostly because of speed and reliability issues. The interpreter is written in javascript, so the more javascript you have running on your page, the more likely it is that you’ll run into bugs, and that your page will slow down. With that in mind, however, the LESS interpreter is actually pretty stable and fast, and probably one of the best solutions around.
There are similar projects for SCSS, but YMMV: LESS and SCSS are fundamentally different languages, with LESS being a declarative language (like CSS) and SCSS being an imperative language (like javascript). This means that you are less likely to run into surprises with in-browser LESS stylesheets than with SCSS.
It showed that the styles were coming from a .scss file and not .css.
That’s likely not the case, if you check at the bottom of the bootstrap.css file you will find this line:
/*# sourceMappingURL=bootstrap.css.map */
Source Maps from preprocessors cause DevTools to load your original files in addition to your minified ones. You then use the originals to set breakpoints and step through code. Meanwhile, Chrome is actually running your minified code. This gives you the illusion of running a development site in production.
Also, you can see in the head from styles the themes is trying to load. Then if you check the network tab, you will see what files are actually loaded in the browser.
Please, guys, this is going off topic, I think we already have a complete topic that discusses preprocessors. The question here was why CSS changes do not have any effect, not which preprocessor to use when we don’t even have SASS files.
@texnixe Is right- I’m curious as to how I’m getting styles loaded from SCSS files at all when none exist in my project. Though I think @pedroborges is on to something with the mapping, though I’m not sure how it can map to a file that doesn’t exist.
It hasn’t. A source map is like a table of contents in a book. It’s embedded in the CSS and contains pointers to the original source code so that you can debug problems. Sometimes this will be a special comment right at the bottom of the CSS files, sometimes it will be a separate file with a .map extension. You do not have the orginal SASS files in your code, its just the CSS knows what the original file was and what it contained because of the sourcemap.
