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
Related
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 have a npm library that I use for styling which uses the following syntax to import scss files. I am not sure what this means and could not find any documentation online. I use grunt with webpack during my build process.
#import '~bourbon/app/assets/stylesheets/bourbon';
#import '~bourbon-neat';
From documentation on a sass-loader#imports project,
webpack provides an advanced mechanism to resolve files. The
sass-loader uses node-sass' custom importer feature to pass all
queries to the webpack resolving engine. Thus you can import your Sass
modules from node_modules. Just prepend them with a ~ to tell webpack
that this is not a relative import
So if you have a file named foo.css and a module foo then you would use ~ if you want to include the module.
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
ColorZilla's gradient editor says
// needs latest Compass, add '#import "compass"' to your scss
Well I've found that's not so easy. Obviously if you just throw #import "compass"; at the top of your .scss file, Sass won't compile because _compass.scss can't be found.
This is an asp.net project utilizing Sass. In addition, I have to use the sass ruby gem to compile, not compass's compiler.
I've installed the compass gem. I've followed the instructions on http://compass-style.org/install/. I've run compass init, compass create, compass install. None of them even give me compass's mixins.
I expected this to work like bourbon, though I know this isn't compass's primary goal.
What am I missing?
Install the library
bower install compass-sass-mixins
Import the compass into your SASS file
#import "bower_components/compass-sass-mixins/lib/compass"
Checkout SASS function list:
https://github.com/askucher/compass-sass-mixins
I created a project using yo webapp (with the generator-webapp installed obviously).
Everything is fine, but I'm still missing something. I'm sure it's such an easy answer that I'll never come back to SO because I'll be too embarrassed.
I want to use Compass, which comes out of the box with Yeoman, but I don't know how. I mean, obviously #import "compass...etc" inside any Sass files won't work since inside app/bower_components (the default path for Sass #imports specified inside Gruntfile.js) there's no compass directory.
What should I do now in order to import Compass stylesheets?
You can use compass just as you would usually do. If you set up a vanilla compass project with compass create, there is compass folder either. If you want to use any of the helpers compass ships with, you can import them just as described in the documentation, e.g.
#import "compass/css3";
.mybox {
#include box-shadow(red 2px 2px 10px);
}
main.scss
You would have to install grunt task for compass with npm install grunt-contrib-compass and adjust your Gruntfile.js to add a task for compass compilation.
It may appear not that easy since it has some tricky parts like to compile your sass to .temp/main.css to use for testing/livereload, and then minify it into your dist when doing final build.
The most easy way might be to just try another generator that has compass in a separate directory. For example angular generator has compass and even bootstrap for compass. It's pretty cool.