irispixel / vscode-dartsass Goto Github PK

Just a little thing:

In VS Code direct
--> Description for the plugin
--> Link in headline on top: 'Respority'

The Link is wrong
Leads to 'https://github.com/codelios/vscode-plugin-dartsass'
which does not exists on github

br Lakro

Hey @akkumar,
Why did you deprecate the old one - is this new one different?
Also most importantly, how do I upgrade?

Hello,
my user directory has a space in it (C:\Users\Name Surname\AppData\Roaming\npm\node_modules\sass) so the path doesn't work, even if I enclose it in quotes.
I can't use the file watcher in this way, which is very inconvenient.

Please solve this, thank you.

PS: is the developer (and the plugin) still alive?

Local OS: Win10
VSCode v: 1.63.2
DartJS Sass Compiler and Sass Watcher v: 0.8.8
Sass v: 1.47.0

Sass location: C:\Users\myusername\AppData\Roaming\npm\node_modules\sass

I've tried just about everything. I tried installing sass locally and globally.

I'm currently using "Remote - SSH" extension to edit SCSS files remotely within vscode. If it matters, the remote OS is Ubuntu 20.04 LTS

I am able to compile the SCSS root file by editing the root file, or hitting F1 and then running the DartJS compile current file command. However, if I edit any _file.scss file, the root SCSS file does not recompile, probably because the folder is not being watched by Sass, probably because DartJS is unable to find the Sass binary.

The error says the path does not exist... however:

As evidenced by that image, the path does, in fact, exist.

Also, inside of my settings.json file, this is what my dartjs extension settings looks like:

I no longer know what to do. I have tried everything. I need for this to work. :)

Please help. Mucho gracias, senior. Por favor. Salsa con queso. Dorito.

My SCSS directory tree (example):

• assets/
  • css/
  • scss/

Is there a way to make the watcher put compiled css in css folder ( relative file_path instead relative to project folder ) ?
I don't think I can use directory relative to file_path, because only relative to project root is available.

If I have scss-subfiles (_partial.scss) which are imported to the scss-mainfile (style.scss) by @import or @use:

When I work in the subfiles
and store the subfile ...
the compiling does not start.

The plugin only compiles when the mainfile is saved..
Is there a trick to activate it or ist that an issue or missing functionality?

I searched for information about that but could not find a solution. A advice/feedback would be helpful.

br Lakro

Since a few days this message comes up when I try to compile my SCSS:

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined


When I enter the path to the sass.dart.js file in "Sass Bin Path", I get a different error:

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of o...


I have been using DartSass for a long time and never had the error before.
The problem also occurs on other devices.

Update:
As it seems, the problem is related to the latest VS code version (V1.56.2). One solution would be to use an older version, such as version 1.55.2.

As it stands today - to have a sass watcher , we need to have a sass binary installed in the user's machine as there is no JS api ( in the sass library ) to expose the watcher functionality.

sass#2823 dart-sass#950 logged to address the same . it would be useful to get that api exposed by dart-sass to be incorporated by this plugin later.

I'm trying to get the DartJS Sass Compiler to work in VSCode on the current Mac OS bnut when it tries to compile I get an error message and no css file is generated:
DEBUG: About to compile current file: /Users/<myname>/Projects/<projectname>/client/src/stylesheet/mystyles.scss WARN: Run: Cwd: /Users/<myname>/Projects/<projectname>. Exec: node_modules/.bin/sass client/src/stylesheet/mystyles.scss:client/src/stylesheet/mystyles.css did not launch correctly. pid is null / undefined - undefined

Sass Bin Path is set to node_modules/.bin/sass, but if I look in the .bin folder there is no sass item there.

Any support to resolve this would be much appreciated.

Many thanks, Mark

'Visual Studio Code' and 'DartJS Sass Compiler and Sass Watcher' current versions.

I've downloaded Bootstrap 5 (from https://github.com/twbs/bootstrap/releases/download/v5.0.0/bootstrap-5.0.0-dist.zip), unzipped, opened directory bootstrap-5.0.0 and file scss\bootstrap.scss.

Bootstrap 5 sources contain .browserslistrc file.

The compiled bootstrap.css differs from official bootstrap.css. It contains all possible browser prefixes. For example:

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}

instead of

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}

When the .scss files contain an error, the VS Code Plugin only shows the return status code (e.g. Process exited with code: 65) instead of showing the detailed error message like shown when running sass --error-css option switched on. This behaviour doesn´t change with dartsass.debug option false or true either.

Would it be possible to always show the error message in the VS Code console so we can fix it right in the editor wihtout the need to open a terminal and check whats going on?

Hello,
it would be useful to have an option to create only the minified files to use them in production.
Usually there's no need to have a non minified style.css, if we have a style.css.min.map for debugging.

It would also be useful not to have a ".min" in the filename.

The list of directory watchers need to be better visualized .

Currently it appears as a naive output in the "DartJS" console in simple plain text . Not very useful and intuitive.

Hello,
my user directory has a space in it (C:\Users\Name Surname\AppData\Roaming\npm\node_modules\sass) so the path doesn't work, even if I enclose it in quotes.
I can't use the file watcher in this way, which is very inconvenient.

Please solve this, thank you.

PS: is the developer (and the plugin) still alive?

Better documentation for sass watchers need to be in place.

Current readme.md does not do full justification for what is happening behind the scenes.

It seems that partials loaded by the load-css() mixin (being a part of the inbuilt sass meta module) are being compiled only during the startup of the Vscode. Any later changes in either loaded or loading partial don't seem to trigger compiling of loaded file. Adding an additional watcher doesn't change anything in that matter.

Edit:
It seems that this behavior is expected and using mixins is better alternative.

Sass watcher not working.
If I trying to run from command palette, then will throw error:
Command 'DartSass: Sass Watch' resulted in an error (Running the contributed command: 'dartsass.watchDir' failed.)

But compile current file still working.

I would like to set dartsass.targetDirectory, but the documentation just assumes you know how to set the property on the extension. I've right clicked, searched online but it isn't exactly obvious at least to me.

Is this plugin compatible with Dart Sass 1.26.4 via dartsass.sassBinPath? This is the native Dart compiled version rather than the DartJS JavaScript compiled version (1.26.3) that your documentation references. I want to try out the new @use and @forward syntax that are only supported in the later version.

If there is a main SCSS file main.scss, the resulting CSS file main.css is automatically generated upon saving it.
However, the plugin is not aware of changes in dependencies. If an included file (e.g., _foo.scss from @use 'foo') changes and is saved, nothing happens. The plugin should analyze these dependencies (which are easy to parse at compile time) and also check if files that the main file refers to change.

Steps to reproduce:

1. Create a file main.scss and a file _foo.scss.
2. Write @use 'foo' into main.scss at time t1.
3. Modify _foo.scss at time t2. Check the timestamp of main.css: it is still t1 but should be t2. (The last modification in _foo.scss is not included in main.css yet, until main.scss is modified and the recompilation is finally triggered.)

A very useful feature would be the ability to set only minified versions of the CSS files to be generated.

I want to only compile one file (index.scss), and include other sass files from other folders, so I configured my includePath like:

"dartsass.includePath": [
  "mypath\index.scss"
]

However, if I modify files that are used in index.scss like ...

@use '../../components/landingpage';

...my changes arent compiled because index.scss doesnt change. It would be great if this option could be implemented.