Visual Studio代码导入自定义CSS和JS扩展

时间:2019-12-10 07:33:11

标签: visual-studio-code vscode-extensions

我希望安装自定义样式以在Visual Studio代码中为类和属性使用不同的字体,但是我无法实现。我安装了扩展Custom CSS和JS Loader,并按照指南进行操作,但是它似乎无法正常工作。因此,基本上我创建了文件styles.css,并在其中放置以下代码:

.mtk1,
.mtk2,
.mtk8,
.mtk9,
.mtk10,
.mtk12,
.mtk11,
.mtk7,
.mtk3,
.mtk13,
.mtk16 {
  margin-left: 1px;
  font-family: "Indie Flower";
  font-size: 1em;

}

.mtk7,
.mtk4 {
  font-family: "Arial";
  font-size: 0.7em;
}

/*
  For the tab titles.
*/
.monaco-icon-label-description-container .label-name {
  font-family: "Indie Flower";
  font-size: 1.3em;
}

.tabs-container .monaco-icon-label-description-container .label-name,
.sidebar .monaco-icon-label-description-container .label-name,
.quick-open-row .monaco-icon-label-description-container .label-name {
  font-family: -apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,HelveticaNeue-Light,Ubuntu,Droid Sans,sans-serif;
  font-size: 1em;
}

然后在我添加的settings.json中:

"vscode_custom_css.imports": ["file:///home/mat/vscode_extensions/styles.css"],
 "vscode_custom_css.policy": true,

我通过在该目录“ pwd”中键入来获取路径。因此,它应该是正确的路径,但是它仍然不想应用fontFamily和fontSize这两种样式。有谁知道问题出在哪里?

2 个答案:

答案 0 :(得分:1)

您必须以管理员身份运行VSCode,然后Enable CSS in JS

位于“应用程序”中的VSCode的示例路径: sudo /Applications/Visual\ Studio\ Code.app/Contents/MacOS/Electron

别忘了将所有这些自定义字体安装到Mac设备上。

答案 1 :(得分:0)

扩展名不适用于我,但对于它的价值。...当我弄乱它时...如果您转到帮助菜单,请切换开发人员工具... 。 它会 检查网络标签>您将看到有一个vscode加载的css文件。

file:///Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css

我进入这个文件,直接直接编辑css ...

因为我已经有一个打算与此扩展一起使用的css文件...

@import url("file:///Users/adrian/.vscode/vs-code-styles.css");

重新加载并解决问题。

例如,我喜欢我的字体,但我想要的只是带有不同字体家族和属性的标签。经过反复试验,做到了。里程可能非常取决于vscode是否一直在更改这些类。

span:not(.mtk1) + .mtki, span:not(.mtk1) + .mtk6{
    font-family: 'Courier New' !important;
}