How do I build my .scss using webpack? I can find less loaders and css loaders but not scss. Is this the same as Sass? I keep getting referenced to Sass but the syntax is different
This is more a question of SASS syntax vs SCSS syntax.
Directly from the first result on google for such a search:
The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3's syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. The second, older syntax is known as the indented syntax (or just “.sass”).
As for its compatibility with the sass-loader in webpack - ultimately, the sass loader calls the node-sass library, which itself is built on libsass.
The tools support both syntax forms, so you can expect to use the sass-loader with either without any problem.
sass-loader usage with older .sass syntax
If you are using .sass you simply need to pass an option on the query-string when using the sass-loader:
loaders: [
{
test: /\.sass$/,
// Passing indentedSyntax query param to node-sass
loaders: ["style", "css", "sass?indentedSyntax"]
}
]
sass-loader usage with more common .scss syntax
If you are using .scss, and provided you having configured the loader correctly, everything should just work.
Here is a link to the sass-loader for your reference: https://github.com/jtangelder/sass-loader
Related
I'm upgrading an old system with many of these:
#import "~bootstrap/scss/mixins";
That fails when compiling with the dart-sass CLI.
I used to use node-sass, and packages like node-sass-tilde-importer and node-sass-package-importer to help with that syntax. They don't seem to work for dart-sass.
Given that I'm now using the dart sass CLI, how do I deal with this?
The solution is simple, but unfortunately does not support the tilde syntax.
The scss file should have this:
#import "foo/bar"; // <--- must remove tilde
And the cli syntax is:
sass --load-path=path/to/node_modules SomeFile.scss SomeFile.css
For completeness, the obvious other solution is:
#import "../../../node_modules/foo/bar";
Dart Sass CLI? I think there is no way to import like this in Dart Sass. You have to do it manually.
But there is a Sass migrator to fix legacy sass code, give it a try :
https://sass-lang.com/documentation/cli/migrator
If you are using it with module bundlers, this might help:
How to import sass using tilde prefix with webpack, sass-loader and dart sass
this is a strange error that I don't understand at all. I usually search and seek the answer before posting it on StackOverflow. So the problem is that I would like to use the variables that I imported from another scss file called _variables.com using #use. This is written in scss-lang.com#use. The way I try to use my variable:
_variables.scss
$secondary-color: #CEA44A;
style.scss
#use '../../variables';
.foo {
background-color: variables.$secondary-color;
}
// ERROR TEXT
Invalid CSS after "...olor: variables": expected expression (e.g. 1px, bold), was ".$secondary-color;"
on line 19 of sass/c:\Users\Amirreza Amini\Desktop\blog\src\Components\Register\Register.scss
background-color: variables.$secondary-color;
Use Live Sass Compiler by Glenn Marks
I had exactly the same problem. You read about #use on SASS official website, follow the instructions, write the code in Visual Studio Code and then you get this strange Compilation Error when saving the SASS or SCSS file. You double check everything and it seems like it should work but it doesn't.
Well, the problem is caused by the Visual Studio Code extension you are using for compiling SASS or SCSS files to CSS files.
Don't use this extension: Live Sass Compiler by Ritwick Dey
You are probably using this extension: Live Sass Compiler by Ritwick Dey.
It's widely used, but no longer supported by the author. Consequently, the SASS version isn't updated. This extension produces the error you are describing as you can see below.
Use this extension: Live Sass Compiler by Glenn Marks
You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to #ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has built upon it. This extension compiles your SASS or SCSS files to CSS files successfully as you can see below.
change #use '../../variables'; to #use '../../variables' as *;
I've npm installed the latest node-sass, and scss files work fine until I use #use. I have a _tokens.scss file in /shared/tokens/ folder. Within _tokens.scss I have:
$colorwhite: #ffffff;
In my root folder, my App.scss looks like this:
#use "shared/tokens/tokens";
.App-header {
color: tokens.$colorwhite;
}
But I am getting this error:
./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
SassError: Invalid CSS after " color: tokens": expected expression (e.g. 1px, bold), was ".$colorwhite;"
on line 26 of /Users/xxx/src/App.scss
>> color: tokens.$colorwhite;
Any ideas?
Edit: it works fine with #import. I've also tried #use... as * but no-go.
Update:
Since Node Sass is now deprecated, you can migrate to Dart Sass by replacing node-sass with sass in your package.json and so you will be able to use the #use and #forward rules.
You can use the migration tool to help you with the update.
Original answer:
The #use rule is currently only supported by Dart Sass. You should use #import instead.
You could switch to Dart Sass by taking advantage of package-aliasing. I guess this will not work under yarn.
First you remove the current node-sass pkg, then run:
npm install node-sass#npm:sass.
And you are fit to use the full features from sass with some remarks though.
Check the behavioral diffs here.
The performance measurement indicates that dart-sass is slower than node-sass.
It's all up to you and this turns to be a valid option here, if you really want to use these features provided by Sass.
I've been using Compass to compile Sass in my project, but it is now deprecated and no longer maintained so I want to move away from using Compass. The project uses PHP and Laravel, so I would like to use Laravel Elixir for compiling the Sass files instead.
Is there a way to transfer my .scss files from Compass to Elixir without going in and changing all the places in my Sass code that I use Compass helpers, or do I need to more or less re-write my Sass files? There are a ton of them, so I would love to avoid that.
On the suggestion of my co-worker, what I tried was to add the compass files to my resources/assets/sass directory (includes compass/css3, compass/layout, compass/reset, compass/typography, and compass/utilities, as well as several other .scss files included in Compass. The hope was that by including these files, the functions of Compass would still apply outside of it.
When I try to compile with gulp, the error I'm currently getting (although I'm guess I'll run into another one once this is fixed) is:
>> Sass Compilation Failed: resources/assets/sass/compass/_support.scss
Error: Undefined operation: "prefix-usage(browser-prefixes(browsers()), css-transitions, (full-support: true), (partial-support: true)) gt 0.1".
on line 324 of resources/assets/sass/compass/_support.scss
>> #if $usage > $threshold {
------^
My guess is that I will need to go ahead and remove the Compass stuff from the Sass code manually, but I'm hoping someone else has a better solution for me! Thanks.
I've been using sass for quite some time however I was wondering if there is a way to force it to use files with a .css extension as input instead of the usual .scss.
The thing is I would like to use sass to perform minification on a rather old project which was written in pure CSS however stuff like this won't work until I change the extension of the file to .scss.
sass input.css output.css --style compressed
So basically what I am asking is if there is anything I could use to bypass the requirement sass is imposing on me to exclusively use files with .scss extension as input? Something like a command line option perhaps which I missed in the official documentation?
After some additional documentation book-worming and poking with the sass command line tool itself it seems I found the solution. All I needed to do is add the --scss argument to let sass know that no matter which file or extension I use it should interpret it as a SASS file. Since my CSS files are of course SASS compliant minification was performed without a trace of complaining.
sass --scss main.css main.min.css --style compressed
One little (in my opinion badly documented) command line argument and I waste the better part of the day to find it.