Questions tagged [dart-sass]
93 questions
3
votes
0 answers
Deprecation Warning: The selector ">" is invalid CSS. This will be an error in Dart Sass 2.0.0
I'm migrating from node-sass to dart-sass and in my .css file I have this style:
> .wc-card .wc-list.hero > .ac-container > .ac-container {
width: 273px;
background-color: #fff !important;
}
When i build my react application with npm install I…
headlessdoll
- 51
- 3
3
votes
1 answer
Can't use CSS Variables inside of filter grayscale with SCSS
I'm trying to make the 100% in filter: grayscale(100%); be a CSS variable so I can dynamically change it later with JavaScript.
--percent: 100%;
filter: grayscale(var(--percent));
This is not compiling with Dart sass. It's telling me:
Dart Sass…
briann
- 143
- 7
3
votes
1 answer
SASS undefined variable when using @use
I'm using some copied SASS code to start a project. It was written with @import for Ruby SASS, and I've changed it to @use for Dart SASS.
style.scss
// base
@use 'css/var' as *;
@use 'css/base' as *;
@use 'css/typography' as *;
// layouts
@use…
Mike Eng
- 1,593
- 4
- 34
- 53
2
votes
1 answer
How do I import a file when I use the compileString() method from Dart Sass?
I was really trying to understand Sass documentation but it does not provide good examples, so I need some help, please. As Dart Sass allows now to execute some functions on browser, and that is what I am doing, I need to use compileString() instead…
Mila Kings
- 21
- 3
2
votes
0 answers
SCSS file compilation error with angular/material@15
I'm trying to create a css file using the following client.scss file. I'm getting compilation errors.
@use '../../../node_modules/@angular/material' as mat;
@use '../../../node_modules/@angular/material/theming';
$branding-url-root:…
Ravi
- 1,614
- 4
- 14
- 27
2
votes
0 answers
How do I use loadPath with sass-loader and webpack?
I'm creating a little app that is bundled with webpack. I'm using sass in the project and all scss files are located in a scss located in the root directory. I've got some partials I've created in a directory named partials. The directory structure…
Abdulramon jemil
- 47
- 6
2
votes
0 answers
Dart-Sass watch and compile if a dependency changes
In the base directory I have main.scss, that should be compiled whenever one of it's dependencies in a subdirectory changes:
/main.scss:
@use "sass:meta";
@use '/sub_1/_incl_1';
@include…
jamacoe
- 519
- 4
- 16
2
votes
1 answer
Effectively Using SASS/SCSS
At work, I've been using SCSS for a few years. I've now just started my own React project and want to use it as well. To this end I installed dart-sass. I prefer building React component "bundles" where a folder with the same name as the…
RobertW
- 226
- 1
- 2
- 10
2
votes
2 answers
Can I use sass-embedded as part of my sass-loader for my webpack.config.js
I am trying to do something like this but for my webpack.config.js but I run into an error that states: Unknown Sass implementation "sass-embedded".
I have sass-embedded installed as a module. Any sort of insight would be appreciated as to why this…
Rohan Afsan
- 61
- 1
- 8
2
votes
2 answers
Tilde imports with the dart sass CLI
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…
lonix
- 14,255
- 23
- 85
- 176
2
votes
0 answers
dart sass compile file and resolve imports
I'am working with sass progmatically, So I want to compile a scss file.
const sourcePath = '******/******/****';
const code = sass.compile(sourcePath).css.toString();
I get this error:
An unhandled exception occurred:
@import…
Karim Oodrive
- 61
- 5
2
votes
1 answer
How to use @use in Bootstrap v5 instead of @import for customization
I'm trying to use @use instead of @import to import all the variables in my _custom.scss partial to styles.scss sass file. But @use is not overriding the variables as i intendent. How to solve?
_custom.scss
$primary: #ff00f2;
$secondary:…
Patrick Prakash
- 500
- 1
- 7
- 17
2
votes
1 answer
How to import external files inside the selector with Dart Sass
I want to import external files inside the selector using Dart Sass.
When I use @use to realize this, it causes an error.
//error
.selector {
@use 'external-file';
}
I used to use @import to do this before with node-sass and it was…
abms
- 545
- 1
- 3
- 13
2
votes
1 answer
What is the equivalent of adding an integer to a color in new SASS?
For a while, color arithmetic in SASS has been deprecated and not available in newer versions of the tool. I am currently migrating an older project which had color arithmetic.
For example, the older scss files has something like this:
background:…
Nandeep Mali
- 4,456
- 1
- 25
- 34
2
votes
1 answer
node-sass to dart-sass How to compile and watch changes in mypath/folder containing many sass files to a single file
I was using node-sass and just now started to using dart sass and i want to ask how can i compile and watch a folder to a single file?
I was using this commands in scripts on package.json and worked:
"scss": "node-sass -o . src/scss",
"build": "npm…
Chris Grizis
- 31
- 5