Started out by using node-sass and typed #import "abstract/variables" on main.scss, didn't work.
Error - "message": "only UTF-8 documents are currently supported; your document appears to be UTF-16".
Tried to add #charset "UTF-8"; on main.scss, didn't fix it.
Next I found out #import, node-sass & libSass has been deprecated since 2020 and is no longer recommended to use.
Therefore I did as the official Sass website encourages their users to do and switched to dart sass(which is the primary implementation of sass). I uninstalled node-sass and installed sass which reflected on devDependencies. Made the necessary script change in package.json and replaced node-sass with just sass.
Lastly I tested #use "abstract/variables"; but still didn't solve the issue.
Appreciate straight up answers on how to solve it and what I didn't do that was missing in order to make this work as I want.
Thanks in advance!
main.scss
#use "abstract/variables";
variables.scss
$color-primary: #55c57a;
$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;
$color-grey-dark: #777;
$color-white: #fff;
$color-black: #000;
What I want to achieve is that all partial _(name).scss files can successfully import their respective codes that I've divided into each belonging file for a clean code structure, into my main.scss file which should just contain imports in it like #use "folder-name/file-name"; to make sure everything gets imported correctly and works as intended. For instance if I change a color in the partial file _variables.scss (which is in the abstract folder) from white to red it should apply on save with no error shown in compile terminal (also have live-server terminal).
But when I add in #use "abstract/variables"; and move over the variables from main.scss to _variables.scss, it doesn't work and the page just becomes white with error message shown and the text I wrote in my code.
I solved this issue and want to share it with others who may stumble into this problem in the future too.
I changed the UTF format at the bottom of VS Code from 16 to 8 (since I had the error "Invalid UTF-8"). Then I added as * to the #use "abstract/variables"; so it became like this #use "abstract/variables" as *;.
Lastly, if you're using attributes in one partial file from another, then you need to put the same line as you have in the main.scss #use "abstract/variables" as *; to the partial file as well.
Ex: If you're using a $color-blue variable in your _base.scss, then you put the above mentioned line in the base file (because the variable is in a different folder & file).
Related
I have multiple SCSS files that I want to import into one main SCSS file. I want ALL of the contents of that file to be imported, basically copying the entire document into the other one. Currently, I am using #import, which is exactly what I need. But now it has been announced that it will be removed from SCSS, and I'm afraid that #use cannot replicate this functionality that I need. With #use, I can only import selected variables, classes etc., but I want the entire file.
Two possible solutions (that I don't want to go for):
A) Writing everything in the same file. But that would become quite messy. I have one template SCSS file with variables and utility classes (a lot of them), and 3 other files for custom code (so the CSS of a site can be changed by multiple people at the same time, having only one file would limit it to one person at a time)
B) Loading multiple stylesheets on the site. That would be the better option, but that would cause a lot of unnecessary requests on the server.
Any ideas? I'm using SCSS in Wordpress. Will the #import rule be unusable once it's been removed from the language? What if I didn't update the Plugin that compiles the SCSS? It's frustrating because the current #import rule does exactly what I need...
Thank you!
The question is more or less resolved. I was trying to migrate from #import to #use in an environment that does not support the #use rule at all. As I said, I'm using a Wordpress plugin to compile. #use is only available in Dart Sass and upon using it in my setup, the compiler would throw errors, as it is based on phpsass, which does not have #use or #forward and still uses #import. Which make everything a lot easier!
So, I've done making all of my partials at there own folder(like base,abstracts etc) and every folder have there _index.scss where I already #forward all the partials there. Then at the main.scss file, the only thing I needed to do is #use all of my folders' index. But, instead of showing all the results at the css file, it just copies the #use comment from the main sass file, and return with the 'Unknown at rule #use', this makes sense because #use only works for sass not css. But why does the css doesnt translate the #use function from the main sass file, instead it just spit out the exact code block which is " #use 'abstracts' "(for example). Do I need to set-up something besides the sass compiler itself? Like some javascript? Because I dont really have any decent knowledge at Javascript. I hope you can answer my questions, Thank You!!
This is the screenshot, the right side is the css, which suppose to load the sass files,but instead just output the same command which is the #use
I am using bootstrap with Meteor, and importing the bootstrap.less files, which is installed in the public folder, through an import command in main.less:
#import "public/bower_components/bootstrap/less/bootstrap.less";
Below it, I can start using the bootstrap mixins such as .clearfix() and text-hide() and they compile fine.
However, when I want to abstract my own less code into a separate file apply.less and import that file back into main.less, which now looks like this:
#import "public/bower_components/bootstrap/less/bootstrap.less";
#import "apply.less";
I now gets an error
=> Errors prevented startup:
While building the application:
client/less/apply.less:10:2: Less compiler error: .clearfix is undefined
This is really strange. Is this an issue with Meteor?
Another thing I found out - if I put this empty mixin definition
.clearfix(){}
at the top of my apply.less file, things will compile fine again.
Has anyone come across this issue before and figured out a workaround?
Rename your second file as apply.lessimport and import it as:
#import "apply.lessimport";
Basically, the less package looks for every file in the directory tree with a ".less" extension and compiles it to CSS individually, regardless of whether the file is being imported by another file.
When it finds a file with a ".lessimport" extension, it adds it to the list of watched files, but does not actually compile or do anything with it.
I have an issue with sass compilation.
When I have a project with a partial _partial.scss and have it imported in multiple partial files (because it contains color variables) it will end up in the compiled css multiple times!
This is ugly because the same rule will 'overrule' itself multiple times which makes debugging info (chromium dev tools / firebug) rather unreadable.
I presume there is a solution for all this. I just can't find anything on the issue, anywhere.
The solution is to either not include the same file multiple times or don't have any code that directly outputs CSS in the file you're planning on including more than once. If your variables were in a file by themselves, they could be safely included anywhere you'd like without selector duplication.
Maybe this #mixin helps you: https://github.com/wilsonpage/sass-import-once.
Have a look at the example and note how the reset is only included once in the final CSS.
It seems that just for this, sass (and thus, scss) now have #use instead of #import. From the #use documentation (emphasis is mine):
The simplest #use rule is written #use "", which loads the module at the given URL. Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.
Sass also discourages further use of #import:
The Sass team discourages the continued use of the #import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the #use rule instead.
Any projects having this problem could try running the module migrator tool and check if the problem is resolved.
I can't confirm that this syntax is best practice. I would like to reference an external Sass file and have it prepend it to my final CSS file, this way my Sass sheet looks more clean, and I'm only still only making one HTTP request.
For example, take the "normalize" code and put it into a .sass file, then in my sass sheets simply refer to it:
#import src/normalize
#import src/droidSans
rest of code here.....
It works fine so far, but I can't find anything concrete if I'm headed in the right direction. Also I am just making static templates for the time being... not using Rails at the moment.
I have been playing around with Sass for a few hours and I love it!!!
In order to prevent your partial from being converted into its own css file, prefix the filename with an underscore, _normalize.scss. Then you can import it the way you've indicated you're doing already:
#import "normalize";
Or import many files at once:
#import "normalize", "droidSans";
Or import from a relative directory:
#import "folder/file"
Note the use of double-quotes and semi-colon; I'm using the SCSS syntax which is a later development to the SASS word. While both styles are valid, you may find yourself preferring one over the other depending on what other languages you dabble in.
Further reading can be found under Directives/Partials in the documentation.