I'm using Live Sass Compiler v3.0.0 in my VS Code and it throws a compilation error whenever I use the #use rule to import variables from another file. However, when I use the Sass command line interface (sass --watch) to compile my files, it throws no errors.
Therefore, I want to ask is this caused by a syntax error in my code or a bug of Live Sass Compiler.
Steps to Reproduce
File Structure & Code
This is the file structure of the folder called sass-test that I opened in VS Code:
sass-test
| style.scss
| _variables.scss
style.scss
#use "variables";
html {
color: variables.$primaryColor;
}
_variables.scss
$primaryColor: #ff0000;
Live Sass Compiler Output
Open style.scss in a new tab in VS Code. Then, click the "Watch Sass" button located in the bottom right of the window. Live Sass Compiler would output the following error:
Compiling Sass/Scss Files:
d:\Web Development\sass-test\style.scss
--------------------
Compilation Error
Error: Invalid CSS after " color: variables": expected expression (e.g. 1px, bold), was ".$primaryColor;"
on line 4 of sass/d:\Web Development\sass-test\style.scss
>> color: variables.$primaryColor;
------------------^
--------------------
Watching...
-------------------
Sass CLI Output
Open Terminal and run sass --watch style.scss:style.css. The compiler successfully compiles without any errors:
Compiled style.scss to style.css.
Sass is watching for changes. Press Ctrl-C to stop.
Since my code can compile successfully with Sass CLI, does it mean that my code is syntactically correct and it's caused by a bug from the Live Sass Compiler extension?
I had same/similar problem two days ago.
#use is a new directive introduced in the new official Version 'Dart Sass' and replaces '#import' which is depricated now.
The popular Extension 'Live Sass Compiler' in VS Code is not longer supported by the maintainer for some time. So unfortunately the Sass Version is not updated in that extension...
In VS Code for 'Dart Sass' I found the the Extension 'DartJS Sass Compiler':
https://marketplace.visualstudio.com/items?itemName=codelios.dartsass
Actual I just did a quick testing so I cannot report much about it. But on the first glance it is running well. But as it is another extension you may have to change some settings.
UPDATE
Additional to the above reported exentsion DartJS Sass Compiler with actual SASS version I found an actualised and actual maintained fork of Live Sass Compiler. It has been deep hidden in the searching reuslts. As it is a very popular extension in VS Code here the link to the fork:
https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass
Remark:
I played arround with both extension. Both are doing the job well and have advantages.
'DartJS Sass Compiler' has the additional possibility for more detailed output like information about sass version and watchers. And additional to included SASS version it allows to use your own SASS version if installed to your system or locally to your project. So there is no/less dependency on updates by the maintainer.
'Live Sass Compiler' runs out of the box with included sass version. As it is a very popular extension in VS Code there is a special advantage: it seems it keeps your settings in the old projects running.
I think both are good solutions.
Related
I have a Rust (2021) lib. It compiled fine.
I added a build.rs file with this in it:
extern crate cbindgen;
use std::env;
fn main() {
let crate_dir = env::var("CARGO_MANIFEST_DIR").unwrap();
cbindgen::Builder::new()
.with_crate(crate_dir)
.generate()
.expect("Unable to generate bindings")
.write_to_file("rush_engine.h");
}
Next, I added this to the bottom of Cargo.toml:
[build-dependencies]
cbindgen = "0.20.0"
Finally, I added a cbindgen.toml file with the contents of this:
https://github.com/eqrion/cbindgen/blob/master/template.toml
If I run 'cargo build' the .h file appears as expected and there's no errors from cargo in the terminal window.
However, VS Code has the entire Cargo.toml underlined under every word with red squiggles and there's an error message at the bottom saying 'failed to run custom build command for lib_name'.
I cannot find a solution to this (have removed everything and re-added, cleaned out target folder, etc) and though it's not breaking anything, it's kinda off-putting that this glaring error keeps showing.
Any pointers on how to solve this would be grately appreciated.
Cheers
Jase
Additional requested info:
The Cargo.toml at issue looks like this:
[package]
name = "rush_engine"
version = "0.1.0"
edition = "2021"
publish = false
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[lib]
crate-type = ["cdylib", "staticlib"]
[dependencies]
chrono = "0.4"
[build-dependencies]
cbindgen = "0.20.0"
The VSCode extensions I'm using are:
rust-lang.rust (version 0.7.8)
...that's literally it. I don't see anything else rust related in running extensions.
Something Francis Gagné (thanks!) said got me wondering and experimenting. That's how I found a solution.
The solution (for me) was uninstall the official Rust extension, then install the rust-analyzer extension. This seems to have the exact same functionality, and it's not red-squiggling my entire Cargo.toml file, too!
I have an issue with the Live Sass compiler in VS Code, namely when working with lists. None of the usual operations work. In the following example, it's list.nth(list,index).
The following works fine in a Codepen:
HTML
<p>red</p>
<p>blue</p>
<p>green</p>
SCSS
#use "sass:list";
p {
font-size: 25x;
font-weight: bold;
}
$colors: red blue green;
#for $n from 1 through 3 {
p:nth-child(#{$n}) {
color: list.nth($colors,$n);
}
}
This also works fine when compiling it locally with the Dart Sass CLI.
But when I try to compile this with the Live Sass compiler in VS Code, I get the following error:
Compilation Error
Error: Invalid CSS after "... color: list": expected expression (e.g. 1px, bold), was ".nth($colors, $n);"
Why is that?
Use Live Sass Compiler by Glenn Marks
I had exactly the same problem. You read the 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 is no longer supported by the author. Consequently, the SASS version isn't updated. This extension produces the error you are describing.
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 been built upon it. This extension compiles your SASS or SCSS files to CSS files successfully.
The extension you are using does not seem to be maintained anymore, you can try to use this one instead.
I´m trying to get a simple TypeScript file working in PHPStorm, but sadly there seem to be some misconfiguration by default as the class keyword is not recognized properly
This is my TypeScript file:
class Test{
}
And this is the error I´m facing:
And this is my FieWatcher configuration of TypeScript
How can I get TypeScript working?
The Program options should not be node.exe (that would mean you are trying to typescript code as javascript). It needs to be tsc or node tsc(that means you want to run tsc to compile the file to javascript).
PS: this video might be helpful : https://www.youtube.com/watch?v=RWXGMug_Rmo&hd=1
In Progress Developer Studio (Eclipse):
How do you set up the project so it won't "compile" (check for errors) in .i (include) files separately?
Now we get a lot of errors because include files can not be run on its own. For example some variables that are used in the .i file are defined in p/w file - that will generate an error.
By default includes are not compiled. The errors shown on include files are caused by other sources (.cls, .p, .w) that failed to compile on that include.
See also : knowledgebase.progress.com/articles/Article/000048421
My developer friend who has the luxury of developing in a non-Windows environment has been raving about Compass. I finally decided I wanted to give it a try. I'm tired of trying to keep up with all of the intricacies of cross-browser CSS.
So, I found it on NuGet, and installed it.
I installs to my solutions root directory in the packages directory:
$(SolutionDir)packages\Ruby.Compass.0.12.2.3\
It comes with a Readme that states the following message:
Ruby Compass v. 0.12.2
Compass is installed in its own NuGet package dir, and available by
'compass' command in "packages\Ruby.Compass.0.12.2.3" folder.
To compile Compass files during build, add the next line to the
project pre-build events:
"$(SolutionDir)packages\Ruby.Compass.0.12.2.3\compass" compile
"$(ProjectDir)."
So, I placed the line in my pre-build events, saved, and tried to build my project. However, I get an error as follows:
The command
""$(SolutionDir)packages\Ruby.Compass.0.12.2.3\compass" compile "$(ProjectDir)."" exited with code 1.
Notice: It actually shows the full path to the ProjectDir and SolutionDir as it's supposed too in the error message. I replaced them with the tokens to keep the project name unanimous.
Let me mention that I tried variations of the suggestion pre-build line:
"$(SolutionDir)packages\Ruby.Compass.0.12.2.3\compass" compile "$(ProjectDir)"
"$(SolutionDir)packages\Ruby.Compass.0.12.2.3\compass" compile "$(ProjectDir)css"
"$(SolutionDir)packages\Ruby.Compass.0.12.2.3\compass" compile "$(ProjectDir)css\test.scss"
The first one just removed that trailing .. The second one pointed it to the directory where all my css files are stored. The third one pointed it to the exact file I was trying to compile was located.
I opened up compass.cmd which is the file it is calling, and it looks like the following:
#echo off
"%~dp0ruby\bin\compass" %*
I'm assuming this calls the compass file in the ruby/bin folder, which looks like this:
#!C:/downloads/ruby-2.0.0-p247-x64-mingw32/ruby-2.0.0-p247-x64-mingw32/bin/ruby.exe
#
# This file was generated by RubyGems.
#
# The application 'compass' is installed as part of a gem, and
# this file is here to facilitate running it.
#
require 'rubygems'
version = ">= 0"
if ARGV.first
str = ARGV.first
str = str.dup.force_encoding("BINARY") if str.respond_to? :force_encoding
if str =~ /\A_(.*)_\z/
version = $1
ARGV.shift
end
end
gem 'compass', version
load Gem.bin_path('compass', 'compass', version)
From there, I'm not sure what is going on. I'm not a Ruby person.
Is there an issue that I'm overlooking here?
Has anyone else been able to install Ruby.Compass via NuGet?
How can I get this working in Visual Studio without having to fight with Ruby?
From: http://codewith.us/automating-css-generation-in-visual-studio-using-sasscompass/
"Note that, if there are issues with your SCSS files, you will receive some variation of the error below.
Error 36 The command "del "C:Projectspubliccss*.css" /S
compass compile "C:Projectspublic" --force" exited with code 1.
Open your Output window (click View -> Output or press Ctrl+W, O), and select “Build” in the “Show output from:” menu. Scroll up until you find your command in the log and you should get a little more insight into what portion of the command failed."