如何在 Eclipse 中集成 CSS 预处理?

2022-01-16 00:00:00 css eclipse-plugin sass eclipse

我想在 Eclipse 中编辑 SCSS 文件，最好使用 .scss 文件的语法高亮显示.

我发现这些资源很有价值:

  • http://sass-lang.com/editors.html - 没有编辑器仅 .scss 文件 .sass
  • http://colorer.sourceforge.net/eclipsecolorer - 只有 .scss 文件

如何在 Eclipse 编辑器中集成 SCSS 开发?

或者，更一般地说，如何将 CSS 预处理器集成到 Eclipse 中?

解决方案

我刚刚想出了如何在 Eclipse 中做到这一点.我承认这个解决方案没有 100% 的 SASS 支持，使用嵌套 css 时颜色会有点时髦，但它比查看纯文本要好得多，而且您不需要安装单独的编辑器.

您需要将 .scss 文件类型与 Eclipse[第 1 部分] 中的原生 Eclipse CSS 编辑器相关联.完成此操作后，您还需要将 .scss 文件类型添加到本机 CSS 编辑器，以便 CSS 编辑器能够打开它 [第 2 部分].以下是 Eclipse 的步骤(我正在为 Web 开发人员运行 Eclipse Java EE IDE，Indigo):

第 1 部分 - 将 .scss 文件类型与本机 Eclipse CSS 编辑器关联

  1. 转到窗口>首选项

  2. 深入了解常规>编辑 >文件关联

  3. 在文件关联"窗格中，单击右上角的添加..."按钮.

  4. 对于文件类型:，输入*.scss，然后点击OK.

  5. 在 File Associations 列表中找到 *.scss 条目并选择它.

  6. 选择*.scss后，在底部面板Associated editors:，点击Add...按钮.

  7. 确保选择顶部的Internal editors，然后找到并选择CSS Editor，然后点击OK.p>

这将文件类型 .scss 与 Eclipse 原生 CSS 编辑器相关联.现在我们必须配置原生 CSS 编辑器来支持 .scss 文件.为此，请按照以下步骤操作:

第 2 部分 - 将 .scss 文件类型添加到本机 CSS 编辑器

  1. 转到窗口>首选项

  2. 深入了解常规>内容类型

  3. 在内容类型"窗格中，展开 Text，然后选择 CSS

  4. 选择CSS后，在底部File associations:窗格中，点击Add...按钮.p>

  5. 对于Content type:，输入*.scss，然后点击OK.

  6. 单击确定关闭首选项"窗口.

全部完成.您现在需要做的就是关闭所有打开的 .scss 文件，然后重新打开它们，然后在 Eclipse 中为 .scss 文件打开 wha-la、css 颜色！

注意:如果没有出现 css 颜色，您可能需要执行以下操作: 右键单击 .scss 文件 >打开方式 >CSS 编辑器.

希望这会有所帮助.

I would like to edit SCSS files in Eclipse, preferably with syntax highlighting for .scss files.

I found these resources valuable:

  • http://sass-lang.com/editors.html - has no editor for .scss files only .sass
  • http://colorer.sourceforge.net/eclipsecolorer - has only .scss files

How can do I integrate SCSS development within the Eclipse editor?

Or, more generally, how do I integrate a CSS pre-processor into Eclipse?

解决方案

I just figured out how to do this in Eclipse. I admit that this solution does not have 100% SASS support, the colors get a little funky when using nested css, but it's waaaaay better than looking at plain text and you don't need to install a separate editor.

You need to associate the .scss file type with the native Eclipse CSS Editor in Eclipse[Part 1]. After you do that, you need to add the .scss file type to the native CSS Editor as well so the CSS Editor will be able to open it [Part 2]. Here are the steps for eclipse (I'm running Eclipse Java EE IDE for Web Developers, Indigo):

Part 1 - Associate the .scss file type with the native Eclipse CSS Editor

  1. Go to Window > Preferences

  2. Drill down to General > Editors > File Associations

  3. In File Associations pane, click the 'Add..." button on the top right.

  4. For File Type:, enter *.scss and then click OK.

  5. Find the *.scss entry in the File Associations list and select it.

  6. After selecting *.scss, on the bottom pane Associated editors:, click the Add... button.

  7. Make sure Internal editors is selected on the top, then find and select CSS Editor and then click OK.

This associated the file type .scss with eclipses native CSS Editor. Now we have to configure the native CSS Editor to support .scss files. To do this, follow this steps:

Part 2 - Add the .scss file type to the native CSS Editor

  1. Go to Window > Preferences

  2. Drill down to General > Content Types

  3. In the Content Types pane, expand Text, then select CSS

  4. After CSS is selected, on the bottom File associations: pane, click the Add... button.

  5. For Content type:, enter *.scss and then click OK.

  6. Click OK to close out the Preferences window.

All done. All you need to do now is close any .scss files that you have open then re-open them and wha-la, css colors in Eclipse for .scss files!

Note: If the css colours do not appear you may have to do the following: Right click the .scss file > Open With > CSS Editor.

Hope this helps.

相关文章