'How to enable CSS editing in Intellij

I just switched to IntelliJ IDEA because I thought it would be great for developing JavaFX application.

I must be doing something wrong because when I am editing a CSS file, there is no code-completion. When I am trying to create a new CSS file there is no option for CSS files.

I am using the community version of IntelliJ.

I have looked very long for an answer, and it hurts that I have to ask here! I hope someone can help me.

javacssintellij-ideaidecode-completion


Solution 1:[1]

You can get help from community edition plugins page. For CSS editor, SmarterEditor and Shifter plugins may be helpful.

Solution 2:[2]

Yes, the CSS editor is not supported for the community version of Intellij , in my case adding plugins did not work but something that helped me was the answer :-

You just need to create a new "file" rather than a directory, package or Java class and save the file with the .css extension.

that I got from here Need IntelliJ Ultimate Edition to run CSS?

Solution 3:[3]

The short answer is no, at least at the moment. The best solution i for me so far is to open the resources folder in Atom editor and do all UI work there. It's handy because you also run atom live server, and not have to restart the application. Also Preview HTML is another very useful plugin.

Solution 4:[4]

you can do one thing that just make use of style tag in the html and inside that use all the css that you want to use

Solution 5:[5]

The short answer is, IntelliJ Community Edition doesn't support CSS. But a workaround would be to manually attach the CSS to the scene(Or what ever element you want). Here's how to do it.

  • Don't go to the "src" and try to add a stylesheet there. Cause it is not there.

  • On the menu bar, Click on Files and create a new File. Make sure you name the file with .css extension (Ex: "newStyleSheet.css")

  • Edit the Style sheet as you would in JavaFx with CSS standards. (Ex: Changing the background colour of the scene)

    .root { -fx-background-color: #383838; }

  • Then attach the stylesheet to the element (in this case the "scene") from application code

    scene.getStylesheets().add("newStyle.css");

Run the application and you should see that the default Stylesheet(STYLESHEET_MODENA) has been changed with your new one.

Solution 6:[6]

CSS, Sass, SCSS, Less, Stylus is checked ?overhere

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Kaveri
Solution 3
Solution 4 saksham_sharma
Solution 5 iWiiCK
Solution 6 Ardei Griene Mabanag

Related Questions