CSS code completion in PhpStorm is not functioning properly for Twig extended templates

Question

CSS code completion in PhpStorm is not functioning properly for Twig extended templates

Currently, I am working with PhpStorm 2016.1 and facing an issue with file autocomplete. The scenario is as follows:

 @mycss
.style {color : red}

@base.html.twig
[...]
<link rel="stylesheet" href="/vendor/mycss.css" />
<!--HERE AUTOCOMPLETE OF style WORKS-->
{%block test%}{%endblock%}


@page.html.twig
{% extends "MyController::base.html.twig" %}
<!--HERE AUTOCOMPLETE OF style NOT WORKS-->
{%block test%}{%endblock%}

Any suggestions on how to resolve this issue and enable autocomplete for all files?

UPDATE

This problem does not seem to be related to TWIG. I do not add new styles in child templates.

The issue may be related to the use of symlinks (e.g. /main.css -> /vendor/css/main.css) which could be causing a problem (although the reason is unclear). For instance, when I type small- (foundation grid) and press ctrl + space to trigger code completion, the IDE appears to get stuck in a loop, the CPU usage spikes to 100%, and it continuously "loads" until a memory error is encountered...

css autocomplete styles twig phpstorm

Answer 1

Answer №1

I've encountered this issue as well.
When using a base template with a placeholder for internal stylesheets, defining internal rules can interfere with the autocomplete feature for external ones.

base.html.twig

<link type="text/stylesheet" rel="stylesheet" href="bootstrap.css" />
{% block css %}
{% endblock %}

inner_view.html.twig

{% extends 'base.html.twig' %}

{% block css %}
    <style>
        .test {
            color: red;
        }
    </style>
{% endblock %}

As a result, the autocomplete for bootstrap classes is disabled in inner_view.html.twig.

Answer 2

I've encountered this issue as well.
When using a base template with a placeholder for internal stylesheets, defining internal rules can interfere with the autocomplete feature for external ones.

base.html.twig

<link type="text/stylesheet" rel="stylesheet" href="bootstrap.css" />
{% block css %}
{% endblock %}

inner_view.html.twig

{% extends 'base.html.twig' %}

{% block css %}
    <style>
        .test {
            color: red;
        }
    </style>
{% endblock %}

As a result, the autocomplete for bootstrap classes is disabled in inner_view.html.twig.

Answer 3

Answer №2

Here's a solution that works for me: https://example.com/image.png

Have you checked for any embedded <style> blocks in the child template? They could be causing the classes from linked .css files to not appear.

Answer 4

Here's a solution that works for me: https://example.com/image.png

Have you checked for any embedded <style> blocks in the child template? They could be causing the classes from linked .css files to not appear.

CSS code completion in PhpStorm is not functioning properly for Twig extended templates

Answer №1

Answer №2

Similar questions

Is there a way to display a delivery estimate underneath the product title on a WooCommerce website?

Storing css data for iPhone Facebook application

Tips for implementing a checkbox (with tick/untick functionality) as a replacement for a plus/minus toggle using HTML

How can I stop and hover over time in AngularJs Interval?

PHP Random Background Image Selector

What are some key considerations for creating a website that is optimized for printing?

Navigate to the line situated at the exact midpoint vertically

Guide to aligning a container to the left in Bootstrap 5

Display the execution duration on an HTML document

Preventing an image from being repeated when using Canvas drawImage() without having to clear the entire canvas

Tips for efficiently moving through divs in a personalized single page application?

What makes CSS Overflow: hidden toggle from working initially to suddenly not working?

Is there a way to maintain image proportions when resizing the window?

Detecting the specific button that was selected with PHP

How can we achieve the same functionality as React Native's { flex: 1 } in React JS?

Retrieve a collection of CSS classes from a StyleSheet by utilizing javascript/jQuery

Java update query experiencing issues

Modifying the color of a placeholder in an HTML input using CSS

Troubleshooting issues with Bootstrap's responsiveness configuration

How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?