I have a folder of SCSS files. The main SCSS file is /css/app.scss. It imports all the other SCSS files, like /css/variables.scss and /css/component_a.scss.
How can I have sass watch my /css/ folder for any changes, then recompile starting from /css/app.scss?
Right now it errors since /css/component_a.scss uses variables defined in a different file. But in app.scss they are imported in the correct order.
My answer may be limited because I don't have all the information about how you are compiling sass and what settings you are using.
However I can see that your file names aren't prefixed with an underscore, basically sass will compile every file individually that doesn't have the '_' prefix.
Basically what you want to do is set up your task manager (grunt, gulp, etc) to watch all files ending with '.scss' then tell it to run the sass compile task and have this pointed at your app.scss file.
With the limited information I have from your question I hope that my answer points you in the right direction to solve your problem.
Related
Folder structure:
Error description:
Sass version:
ParcelJS solved my problem by being able to compile my Sass/Scss code into plain CSS but i don't want to use it in such a small project like this one.
OS: MX Linux.
Sass is able to compile my code just fine if i don't use #use or #import.
Try importing like below with a relative path:
#use ./abstracts/resets
Here is an overview of how Sass imports files:
Finding the File
It wouldn’t be any fun to write out absolute URLs for every stylesheet you import, so Sass’s algorithm for finding a file to import makes it a little easier. For starters, you don’t have to explicitly write out the extension of the file you want to import; #import "variables" will automatically load variables.scss, variables.sass, or variables.css.
⚠️ Heads up
To ensure that stylesheets work on every operating system, Sass imports files by URL, not by file path. This means you need to use forward slashes, not backslashes, even when you’re on Windows.
Load Paths
All Sass implementations allow users to provide load paths: paths on the filesystem that Sass will look in when resolving imports. For example, if you pass node_modules/susy/sass as a load path, you can use #import "susy" to load node_modules/susy/sass/susy.scss.
Imports will always be resolved relative to the current file first, though. Load paths will only be used if no relative file exists that matches the import. This ensures that you can’t accidentally mess up your relative imports when you add a new library.
💡 Fun fact:
Unlike some other languages, Sass doesn’t require that you use ./ for relative imports. Relative imports are always available.
I'm working on a project that my colleagues are also working on, they're working on it in Atom and they have Atom set up so that it works like this:
There's a folder, css, and in that folder is the main file, custom.scss, which imports all other scss files and is compiled in custom.min.css and custom.min.css.map. There are also subfolders with more scss files. Any time any scss file changes in css or any of its subfolders, custom.scss recompiles, but no other scss file recompiles.
Using WebStorm's SCSS File Watcher, can I do this?
My first attempt was to change the scope in the watcher settings, to just watching custom.scss, and that kinda works, but I have to change custom.scss every time I want it recompiled, instead of it recompiling when I change any of the other scss files as well.
My intuition is that I should have the scope set to watching all scss files in the css directory, recursively, and that I should change the Arguments setting in the file watcher to explicitly say compile custom.scss into custom.min.css but I'm not quite sure how to do that
The key setting here is 'Track only root files' -- when that's not set, it tries to compile all watched scss files as they are saved individually, but when it is set, it only compiles a file if it is NOT marked as an include in another file.
Set the scope to watch changes on all scss files: file:assets/css/*.scss
Click 'Track only root files'
Change the arguments to $FileName$:$FileNameWithoutExtension$.min.css --style compressed so that it minifies
Now, when you save a file included in custom.scss, it recompiles only custom.scss (and other root files) into custom.min.css and custom.min.css.map
Im my project I have a main SASS file in the root. I also have a folder with _other.sass and icon.png in it.
main.sass
folder/_other.sass
folder/icon.png
My main SASS file includes my other SASS file:
In main.sass:
#include 'folder/other'
In _other.sass:
div {
background: url(icon.png);
}
Should the path to the image resolve correctly in this case? From the point of view of _other.sass the path is correct, but its not correct relative to main.sass.
Since all the compiled code will be included in your final *.css file, all urls must be relative to that resulting *.css file. In the code you have posted, the url is assigned as regular css code, so it wont be transformed in any way.
If you would use compass, what is a great extension to sass, you can use the provided functions, f. i. those to generate the needed urls. With compass you can configure all the base paths and the stuff alike, sass itself wont do that for you.
I've got some SCSS files set as imports for my main SCSS file, so I don't need them to compile down to CSS. In fact, they will get an error because they reference variable that don't work outside being imported.
How to I set grunt.js to not compile them directly?
CodeKit seems able to do this automatically, but I'd rather stick with grunt.
Rename the files that you wish to only import so that they start with an underscore. Files starting with an underscore are not compiled, but are treated normally by import statements.
The only caveat is that you can't have the same name with and without the underscore in a folder or the import statement will be unhappy.
When using Scout, is there a way to prevent it from compiling every SCSS file? I use one main SCSS file to import all dependency SCSS, thus only need the one CSS file output, as opposed to one CSS for each SCSS.
Files prefixed with an underscore do not get compiled to a CSS file. This is a standard Sass feature. Only the first file listed here will have a corresponding CSS file generated:
i-am-compiled.scss
_i-am-not-compiled.scss
_i-am-also-not-compiled.scss