I would like the compiled file in folder 'RWD/homework/css', not in 'RWD/css', how can I set?
This is my setup:
{
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "./css"
}
],
"[c]": {},
"[bat]": {},
"editor.fontSize": 16
}
My target path
I failed to run node-sass(node module), where I was able to setup path for input extensions.scss files and output files generated after compiling to dist/ folder.
Now, I am using vscode extension live sass compiler,
at bottom bar, when I clicked Watched Sass then it compiled automatically scss file to css but in same folder.
main.scss is compiled to main.css.
problem is that I wanted to create that compiled css file in other folder .i.e. in output folder ./dist/.
I have manually created main.css file in ./dist/folder.
How can I setup path to source and destination files in that extension?
I have had the same issue when I started implementing SMACSS methodology to my projects. This is the solution I have tried. hope it will help you.
Go to VScode User Settings --> Select "Live Sass Compiler Config --> add
"liveSassCompile.settings.formats": [{
"format": "expanded",
"extensionName": ".css",
"savePath": "./css"
}]
Go to VScode menu- file>preferences>settings>extension>live sass copile config>edit in settings.json
and paste it code >>
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css/"
}
]
You can go to VSCode Setting.json file and add following lines after the existing configuration.
Example:
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../dist/css/"
}
]
Not sure if this will help anyone since it's been a long time it was posted but I had multiple folders opened in VSCode recently and everytime I tried to use live sass compiler it would go to the folder that was on top of the list and create the css/styles.css file(s) inside that directory.
I saw this solution on the Live Sass Compiler creators website:
https://ritwickdey.github.io/vscode-live-sass-compiler/docs/faqs.html
What you do is simple, lets say you have a folder architecture
like my one here. (image link)
All you have to do is make a folder named .vscode and add a settings.json file inside that folder.
Inside settings.json paste the following code:
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/Parallax/css"
},
{
"extensionName": ".min.css",
"format": "compressed",
"savePath": "/Parallax/dist/css"
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
]
}
Notice how my liveSassCompile.settings.formats is formatted: I've written the save paths as /Parallax/css/ and /Parallax/dist/css. This goes to the project root and saves the css files inside the folders called css and dist which are inside the Parallax directory. (image link)
In conclusion each time you want to change the save path all you have to do is modify the settings.json file inside the .vscode folder rather than modifying the user settings which is tedious in my opinion.
Final structure should look like this once you edited the main.scss file.
Inside your Project Create a (.vscode) Directory. In the .vscode folder create a json file named settings.json. Inside of the settings.json, type the following key-value pairs. By the way you'll get intelli-sense. I hope this will work
{
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
},
{
"extensionName": ".min.css",
"format": "compressed",
"savePath": "/dist/css"
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
]
}
Go to live SassCompiler extension settings and enter below code setting in JSON file and save.
"liveSassCompile.settings.autoprefix": [],
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../dist/css/"
}
None of above methods worked for me until I used the code below in the settings.json.
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../../css/"
}
],
"editor.minimap.enabled": true,
"liveSassCompile.settings.generateMap": false
}
On the savePath line you have to keep the "~" or else it wont work.
On "editor.minimap.enabled": and "liveSassCompile.settings.generateMap":
These lines are for if you want to generate a map.css file, put "false" for no, or "true" for yes.
Add this to generate .css files in a css folder in the project root directory:
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
}
],
Or to generate in dist/css:
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/dist/css"
}
]
This can either be in VS Code global settings.json to apply to all projects (look for "liveSassCompile.settings.formats" and change the "savePath" line; the provided "format" and "extensionName" are already the defaults), or if you want to limit the settings to the current project, place the settings in a settings.json file within a folder named .vscode.
Refer to the Live Sass Compiler settings doc for more information: https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
Open your vs.code and go to settings then search Sass and see below Live Sass Compiler click here and see right side Live Sass Compile > Settings: Formats then edit this Settings and change only your SavePath Like example below this code.
{
"scss.format.enable": true,
"liveSassCompile.settings.autoprefix": [
],
"liveSassCompile.settings.watchOnLaunch": false,
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/assets/css", // you can change this path
"savePathReplacementPairs": null
}
]
}
Do everything as Sulara said. When you open the settings.json file, it may look like this.
{
"window.zoomLevel": 0
}
So, you need to apply the recommended settings like the following.
{
"window.zoomLevel": 0,
"liveSassCompile.settings.formats": [{
"format": "expanded",
"extensionName": ".css",
"savePath": "./css"
}]
}
You can go to VSCode Setting.json file and add following lines after the existing configuration.
Example:
src path- project_folder/sass/style.scss
output path - project_folder/css/style.css
"liveSassCompile.settings.formats": [{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css/"
}]
I'm working on a project that has multiple projects in a solution. I would like to be able to generate the documentation from an outside directory to keep the application code folders clean. When I try to set the src directory in my docfx.json, it doesn't seem to like absolute paths, nor does it like relative paths.
{
"metadata":
[{
"src":
[{
"files": ["../../../Repos/Wsi.Extranet.CommonServices/Wsi.Extranet.CommonServices/**/*.csproj"]
"exclude":
[
"**/obj/**",
"**/bin/**",
"_site/**"
]
}],
"dest": "api"
}],
"build": {
"content": [
{
"files": [
"api/**.yml",
"api/index.md"
]
},
{
"files": [
"articles/**.md",
"articles/**/toc.yml",
"toc.yml",
"*.md"
],
"exclude": [
"obj/**",
"_site/**"
]
}
],
"resource": [
{
"files": [
"images/**"
],
"exclude": [
"obj/**",
"_site/**"
]
}
],
"overwrite": [
{
"files": [
"apidoc/**.md"
],
"exclude": [
"obj/**",
"_site/**"
]
}
],
"src": "../../../Repos/Wsi.Extranet.CommonServices/Wsi.Extranet.CommonServices",
"dest": "_site",
"globalMetadataFiles": [],
"fileMetadataFiles": [],
"template": [
"default"
],
"postProcessors": [],
"noLangKeyword": false
}
}
It says it built fine but didn't find any files and the directory that it searches for is staying in the current directory.
D:\temp\WsiApiDocs\docfx_project>docfx metadata
Info: Config file docfx.json found, start generating metadata...
Info: No files are found with glob pattern **/*.csproj, excluding
**/obj/**,**/bin/**,_site/**, under directory "D:\temp\WsiApiDocs\docfx_project"
Info: Completed executing in 54.0087 milliseconds.
Build succeeded.
0 Warning(s)
0 Error(s)
When I attempt to put the relative path in the files property, I get the following:
D:\temp\WsiApiDocs\docfx_project>docfx metadata
Info: Config file docfx.json found, start generating metadata...
Info: No files are found with glob pattern
../../../Repos/Wsi.Extranet.CommonServices/Wsi.Extranet.CommonServices/**/*.csproj,
excluding **/obj/**,**/bin/**,_site/**, under directory
"D:\temp\WsiApiDocs\docfx_project"
**Warning: NOTE that `../` is currently not supported in glob pattern, please use `../` in `src` option instead.**
Info: Completed executing in 48.9621 milliseconds.
Build succeeded with warning.
Warning: NOTE that `../` is currently not supported in glob pattern, please use `../` in `src` option instead.
1 Warning(s)
0 Error(s)
So my confusion seems to be in how to use the src option instead. If use the src in metadata, then it seems that I can't specify the file and exclusion info. I tried to use a src property on the same level as metadata but that seemed to do nothing.
Just as the error states
../ is currently not supported in glob pattern
files, exclude etc. use glob patterns. Set a base directory instead via src:
{
"metadata": [
{
"src": [
{
"files": "Repos/Wsi.Extranet.CommonServices/Wsi.Extranet.CommonServices/**.csproj",
"exclude": [
"**/obj/**",
"**/bin/**"
],
"src": "../../.." // <---- base directory
}
],
"dest": "api"
}
],
"content": [
{
"files": [
"api/**.yml",
"api/index.md"
]
}
// ...
]
}
Here is an exmaple of structuring multiple projects
I am using DocFx to automatically generate documentation in Visual Studio 2015.
Per the Getting Started instructions, I added an empty ASP.NET 4 Web Application and used the Nuget Console to install the DocFx build package (e.g. Install-Package docfx.msbuild). I built the site and it it generated documentation for code within the project.
I was wondering how to configure docfx.json to get DocFx to document code in other projects within the solution.
In docfx.json, there is an array of metadata. The example metadata has a src object with files and exclude properties.
To point to another project in your solution, add a cwd property to metadata and change folders (i.e. "../Another.Project").
{
"metadata": [
{
"src": [
{
"files": [ "**/*.csproj" ],
"exclude": [ "**/bin/**", "**/obj/**", "_site/**" ],
"cwd": "../Another.Project"
}
],
"dest": "obj/api"
}
],
"build": ...
}
This worked for me.
directory structure
+---ClassLibrary
| \---ClassLibrary.csproj
\---DocFxProject
\---docfx.json
docfx.json contents
cwd and src are synonyms for the same property
{
"metadata":
[
{
"src":
[
{
"files": [ "**/ClassLibrary.csproj" ],
"src": "..",
"exclude": [ "**/obj/**", "**/bin/**" ]
}
],
"dest": "obj/api"
}
],
"build": { ... }
}
I have a SublimeText3 project which I use to show particular folders in the sidebar. This works, however subdirectories of the folders in folder_include_pattern are not visible in the project (they're obviously there if I open the project as a folder instead).
node_modules
my-module
('test' should be here but is not shown)
my-other-module
('test' should be here but is not shown)
Here is my .project file:
{
"folders": [
{
"path": "node_modules",
"folder_include_patterns": [
"my-module",
"my-other-module"
]
},
{
"path": "."
}
]
}
How can I show all the subdirs of the directories in folder_include_patterns?
Solved it: subdir names must also be in folder_include_patterns. Eg, to include /node_modules/my-module/test, I needed:
{
"folders": [
{
"path": "node_modules",
"folder_include_patterns": [
"my-module",
"my-other-module",
"test"
]
},
{
"path": "."
}
]
}
2018 updae: note if you're reading this in 2018, and want to do this for node_modules, the best way to handle monorepos (where you have some of your own modules included in the project) is via yarn workspaces