I'm using Koala for Win64 to compile sass (with lot of partials) to css with no problems, but Koala auto compile function is only runs when there are updates in root scss file, so I need to open Koala and press 'compile' button every time when I made changes to included partials.
Is there any way to configure scss auto compile to watch for changes in sass partials?
So came across this as I was having problems myself. Just documenting...
1st thing I did
was to create a style.scss or global.scss (making sure to setup "Auto Compile" in Koala) and only fill it with imports:
#import 'layout'; //_layout.scss
#import 'layout_modules'; // _layout_modules.scss
#import 'modules'; // _modules.scss
#import 'theme'; // _theme.scss
When I would work on the partials (partials will have a _ in front of the filename) and save I would get an autocompile confirmation (Koala Settings > General > "Notification when compile is completed")
But _layout_modules.scss would not trigger autocompile on save. If I switched over to another partial and saved, it would autocompile and Koala would still throw helpful errors for _layout_modules.scss.
2nd thing I did
then, was to remove the extra underscore in the filename - so it would just be _layoutmodules.scss (make sure to update your #import on style.scss) and worked as expected.
(I've been using Sass for all of 5 days.)
Short answer:
add _ before partial files and import them to the main file.
Thanks to #philtune
Related
I am having problems with "creating" an Understrap Child theme.
I am using Visual Studio Code and I have a plug in Live Sass Compiler.
The problem I am facing is that when I change/create the variables in _theme.scss and save it, no changes are shown on the website.
My child theme structure:
-understrap-child
*functions.php
*index.php
*style.css
-sass
-theme
*_theme.scss
*_theme_variables.scss
My understanding is that a scss file with an underline is a partial scss file, and as such is not a stand alone file. If I save a regular scss file, without an underline it creates a regular file.
So my questions comes down to, do I need another .scss / .css file where the values from _theme.scss would be applied?
If I can provide any additional information, please let me know.
Edit1:
I think the problem is that I am not importing the underscore/partial files to any other non-underscore files. Since underscore files are partials, I am quite sure they need to be imported into non-underscore / specific files?
VScode - Live Sass Compile console
--------------------
Watching...
--------------------
Change Detected...
_theme_variables.scss
--------------------
Compiling Sass/Scss Files:
--------------------
Watching...
--------------------
Change Detected...
_theme.scss
--------------------
Compiling Sass/Scss Files:
Edit2:
I have downloaded an understrap-child theme from github, but the problem persists.
Edit3:
I have not resolved this problem. I am now using another theme without issue.
write variables colors in
_variable_theme.scss
then import this file in :
_theme.scss ==>
#import '_variable_theme.scss'
for example:
//_variables_theme.scss
$primary-color: #302AE6;
$secondary-color: #536390;
$font-color: #424242;
$bg-color: #fff;
$heading-color: #292922;
// _theme.scss
#import '_variable_theme.scss'
body{background:$primary-color}
, try it.
I faced a similar issue. If you're using an understrap-child theme, the variable overrides can be made on src/sass/theme/_child_theme_variables.scss; I was able to successfully modify $primary value here.
The earlier mistake was expecting theme changes on modifying src/sass/assets/understrap/theme/_theme_variables.scss !!
I'm building in WebStorm.
I have a main.scss witch references several partial files (names prefixed with _) via #use. I have a file watcher set up and everything works fine when I'm working in the main.scss - I make changes, they get compiled and are reflected in my build.
When I make change in a partial though they don't seem to trigger the file watcher. In order for the changes to show in the build I have to jump back to main.scss and make some small change that triggers the watcher and everything gets compiled. This is a bit of a pain to keep having to do but I've tried messing around with the watcher settings and have had no luck.
Can anyone suggest a way to trigger the file watcher when partial SCSS files are updated?
Thanks
Not a full answer as WebStorm just doesn't seem to want to play ball but in the end I set up webpack and am using the sass-loader which seems to work as desired and actually makes more sense as I'll usually be running webpack anyway.
I'm trying to make my SCSS files more modular by splitting it into individual partial files. It's all well until suddenly I have a bunch of .css and .css.map files in my partials directory because I've, naturally, saved all of them, and the Sass watcher dutifully compiled all of them too.
How do I achieve a clean structure like Bootstrap's while not having to manually delete every partial .css files? Ideal scenario is that every time I edit and save the partial files, Sass watcher compiles only the main .scss file.
I'm using VS Code on Mac with a Sass watcher plugin. Is it achievable in this environment?
https://sass-lang.com/guide
A partial is simply a Sass file named with a leading underscore. You
might name it something like _partial.scss. The underscore lets Sass
know that the file is only a partial file and that it should not be
generated into a CSS file. Sass partials are used with the #import
directive. (#import is soon to be deprecated, with a move to #use and #forward instead. https://sass-lang.com/documentation/at-rules/import)
Thanks Arkellys.
Ideally you have a main .scss file, like style.scss for example, and then the other partials exist, like _header.scss for example.
Once you have a partial like that, it's prudent to import it in the main .scss file, at the top of the file. In this case, it would be #import 'header';
Notice that we do not import the underscore...
If you don't have any errors after this, and it's still not compiling then check whether you have properly referenced the compiled css in the head of your html.
Like many developers I am using SASS as a preprocessor. I want to edit my stylesheets in Chrome. I've setup Source Maps to do this, and I know Chrome now supports SASS.
I have a SASS file, style.scss, used to create style.css used on the page. It's mainly just imports of other SASS files. Eg:
#import "colors";
Clicking an imported SASS file, like _colors.scss, it shows a green 'active' icon and shows it is linked to a source map.
However when I edit a SASS variable - like the $dark-blue in the screenshot below, where I've made it a red instead - the file doesn't change, nor does the page update.
How do I edit an imported SASS file in Chrome DevTools?
Edit: note the 'Linked to' on the imported file doesn't seem correct. The only way _colors.scss is used is part of style.scss which is turned into style.css. I suspect this is the cause of the problem. I've opened https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/349 to see if this is the case.
I tried several times to use #import 'reset' in my sass code. Unfortunately its not importing. The rest of the code sublime highlights and recognise with no problem. What should I do to #import the reset.css through sass?
When #importing CSS files into your SASS, you need to specify file extension (e.g. #import "reset.css";). See documentation.
Note: Importing file with .css extension will result in a real "CSS import" at runtime instead of inline SASS-like import. If you want to inject the contents of the file into your compiled CSS, change file extension to .scss.