I'm looking for a tool, an extension which compile/render scss and sass file to css on the server.
I know there is Live Sass Compiler. But it only compiles on the local. Sometimes I need to work on the remote/server. I'm using ftp-simple extension to work on the remote files. But I can't compile scss files.
Is there any solution for that?
Thanks
if you are using node-sass then you just add "compile:sass": "node-sass src/assets/sass/main.scss src/assets/css/style.css -w", in your package.json file,
Like this.
For automatic compile/render use -w, it means vs code watching your sass code whenever you writing it.
"scripts": {
"compile:sass": "node-sass src/assets/sass/main.scss src/assets/css/style.css -w",
"start": "react-scripts start",
},
or if you are doing in another way than you have check this link sass compile in vs code.
Related
Everytime I open my project folder in Visual Studio Code, I get an error on the first line of each file. It cannot find my tsconfig.json file because it is looking in the directory I opened VS Code, not where my eslint.json is. I have a functions folder in my root project where the ESLint config is.
Here is part of it:
"parserOptions": {
"ecmaVersion": 2019,
"project": ["./tsconfig.json", "./tsconfig.dev.json"],
"sourceType": "module"
},
When I run my lint command eslint "src/*.{ts,js}", it works perfectly and shows the correct warnings. This means that the VS Code plugin dbaeumer.vscode-eslint parses the .eslintrc.json config differently than what it should.
If I change the project to ["./functions/tsconfig.json", "./functions/tsconfig.dev.json"], then VS Code stops giving the error, but when I run ESLint, it tries to find it in <path/to/project>/functions/functions/tsconfig.json going in the functions directory twice.
Is this a VS Code bug, a dbaeumer.vscode-eslint bug, or am I doing something wrong? What can I do to fix the error?
You can just add this "eslint.workingDirectories": [{ "mode": "auto" }] to your VS Code settings.json.
It should make the error go away, but it can have unintended side effects.
More Info: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#settings-options
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.
I have a project with this structure:
-src
-dist
-node_modules
-gulpfile.js
-tslint.json
My typescript files reside in src and are transpiled in a gulp task into dist folder. I've installed tslint locally and started with a plain tslint config:
{
"rules": {
"max-line-length": {
"options": [120]
}
}
}
Now, when I run tslint from a command line, I get warnings about all files in 'src' folder as expected. But VSCode highlights only the errors in currently opened file. The 'Problems' tab is getting filled only when I open a file with a tslint error.
Do I need to add some configuration to VSCode launch.json?
At the moment it seems like it's not possible to show all warnings for all files in a project. You might be able to achieve something similar with a VS Code task that starts a watcher.
There's a feature request for this though.
I have vscode 1.9 and I want to have intellisense for jest tests. The problem is that describe, it, expect etc are globally available in jest and you don't need to import them in your test files. So vscode will not show intellisense for them.
Is there any configuration for globals for automatic type acquisition?
You have a few options in this case:
Add jest to your package.json:
"dependencies": {
"jest": "^18.1.0"
}
This only works if you are working JavaScript and do not have a tsconfig.json.
Install #types/jest
$ npm install -D #types/jest
This should work for both JavaScript and TypeScript projects. However #types but may be disabled by a jsconfig.json/tsconfig.json: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Create a jsconfig.json file in the root of your workspace to specifically include jest:
{
"typeAcquisition": {
"include": [
"jest"
]
}
}
This will only work for JavaScript projects when automatic typings acquisition is enabled.
All of these should allow VSCode to pick up jest's typings without an import or require
I tried installing the #types/jest, and it did work, but the problem is that it resulted in the jest suggestions appearing in my .js files as well. I couldn't figure out how to get global suggestions for test, expect, etc. in only .test.js files but not .js files.
So I decided to just manually import each jest global I was going to use in each .test.js file, which allowed the suggestions to appear with types but avoided having the suggestions appear in the .js files:
import { test, expect } from '#jest/globals'
npm install -D #types/jest
edit jest.config.js
typeAcquisition: {
include: ['jest'],
},
Whenever I use ido-find-buffer in Emacs I most of the time get the processed javascript files as first option, while I'd much rather get typescript files first.
Then again, I do not want to always hide javascript files, I guess only when using typescript as well.
Perhaps the best is to have typescript put the javascript files in another folder itself.
Is there a good solution for this?
You can have Typescript store the compiled files in another folder using the compiler option
"outDir": "dist"
Or whatever folder you want them to output into
I just noticed it is possible to define it in package.json:
{
"name": "app",
"version": "0.1",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w --outDir build", // <--- here
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
...
It gets written to a build directory and thus is not causing issues anymore.