I am using Less in Visual Studio to generate css files. When I check in I only want to check in the less files and exclude the generated css files. Is it possible to exclude css files by default when checking in?
Thanks!
If you are using Local Workspaces, you should be able to use a .tfignore file to ignore the css files like so:
######################################
# Ignore .css files in this folder and all its sub-folders
*.css
If you are using Server Workspaces, I think you will just have to avoid adding them when you use the Add Files to Source Control dialog. You can sort by the file type and select all the css files and choose "Exclude"
Related
I was given some files from another developer and was told to make some changes. Within the file structure, there's a .css file and a .css.map file.
I'm relatively new to SASS, but my understanding is that you create a .scss file and use command line: sass --watch style.scss:style.css, which generates the .css.map file and compiles the sass into css.
Is there a way to work backwards with just the .css file and the .css.map file to generate the .scss files, or did the other dev just maybe forget to give me these files?
The CSS is the output of Sass and you cannot generate the original Sass files from the CSS.
As stated by thesassway, source maps (.css.map) seek to bridge the gap between higher-level languages like CoffeeScript and Sass and the lower-level languages they compile down to (JavaScript and CSS). Source maps allow you to see the original source (the CoffeeScript or Sass) instead of the compiled JavaScript or CSS while debugging.
(TL;DR, they are for debugging)
If you were to edit the CSS output files without using SASS to compile them, the next person who writes in the Sass files and compiles them will overwrite your work.
I'm not sure why the other dev will want you to make changes directly to the CSS output files, but asking them for guidance on what that are expecting you to do won't hurt anyone. :)
Yes you can. Using Chrome, inspect something on the page, go to "Sources" tab, go to "Page" tab, expand down to the SCSS files generated from the CSS Map (basically the original SCSS files).
Example below is using WordPress and I was in your situation where all I had was the CSS Map file. Just copy and/or save the files one by one into the appropriate folder. Now you have the SCSS files :)
I am using vscode live sass compiler to compile my sass code to css and am trying to destructure my code such that I have codes for specific function in separate file then I can import them to the main .scss all at once so that one css file to be generated as this is all I need because am using react.
I have been succesfull so far my problem is that even the other refactored code that I already imported are compiled to css. I don't need this.
How can i tell live sass compiler to ignore them?
You can use liveSassCompile.settings.excludeList setting to exclude specific folders. All Sass/Scss files inside the folders will be ignored.
You can use negative glob pattern too if you want to exclude a specific file or files inside this folders.
Examples:
Default value
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
]
Negative glob pattern - if you want exclude all file except file1.scss & file2.scss from path/subpath directory, you can use the expression
"liveSassCompile.settings.excludeList": [
"path/subpath/*[!(file1|file2)].scss"
]
You can find more info here.
There are two way through which you can prevent file to be compiled to generate separate .css file
File(.scss) name starting with underscore( _ ) well not be compiled to generate css file
If you have a folder with multiple .scss files you can exclude all files within folder and its subfolders through vscode setting.json file
Code
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**",
"**/YOUR_FOLDER/**"
],
replace YOUR_FOLDER with your desired folder
example I have 'vender' named folder with all bootstrap source code files
Example:SCSS files in vender folder and it's subfolder will not be compiled
I'm working on a Create-React-App project, which notoriously does not support css transpilers such as SASS and Less. The general solution, as discussed here and here, is to compile the source .less/.scss and import the build product .css into your components. Then you can remove all .css from source control and only track .less/.scss.
This is a fine solution, but only a handful of my components really need Less for clarity/extensibility; for the most part, pure css is fine. So, what I'd like to do is use .css everywhere except for some .less sprinkled in here and there. I can configure this with the Less compiler, but for source control I'd like to watch only the "source" css files, and ignore the "build" css files (generated from Less). Because of this I cannot blanket .gitignore all .css, since some are truly source files.
So, is there a glob pattern for this? Maybe:
*.css where *.less
I see two other possible solutions:
switch everything to .less, even when it's not necessary, and go on ignoring all *.css
selectively .gitignore only the .css that are build products.
I like option 2, but it just seems a little error prone and more maintenance.
Switch everything to less is the verter choice: only one why to make css. It is also easiest to understand how project works for a colleague.
You should also keep different css folders for generated and non generated css file. Then, you can just ignore folder with generated.
You could get 2 folders for exemple src and dist
Simply put source .css and .less files in the src folder and when compiling this folder, copy the .css files to the dist one while .less files are compiled.
But I prefer your "all .less" approach which is less confusing for other developpers.
I'm using SASS and Netbeans for web development. Is it possible to create the default and minified CSS file at once?
Example: I've one SASS file like style.scss and want as fast as possible two compiled files named style.css and style.min.css
What can I do in Netbeans to get both files at once when I save or precompile my SASS file? Is there any solution or does it need every time a manual step to add compress on the command line, etc.?
Thanks!
A person directly edited the css output file. Am I in trouble here? He made edits all throughout the file and if I'm understanding correctly, my changes will overwrite his when I recompile. Is there anyway to keep everything but still work in my scss files? Could I take the entire css file and try the reverse css to scss path to get everything together?
One option would be to save the edited CSS file and then compare it to your compiled CSS file, allowing you to determine what the changes are and add them to your Sass file.
Save the edited CSS file as FileA.css.
Recompile your Sass file into FileB.css
Load files FileA.css and FileB.css into a diff viewer, something like DiffChecker or a desktop app like Kaleidoscope.
Determine the changes and add the appropriate Sass to your original .sass file.