CSS im Plugin am LESS übergeben

Shopware 5 Programmierung
1

Hi,

ich habe in einem Plugin ein Textfeld gemacht wo man css einfügen kann. Dieses wird dann an eine all.less file im Plugin übergeben und soll dort ausgegeben/gerendert werden. Nur leider funktioniert das nicht. Schon beim installieren ist es sehr langsam. Theme compilieren läuft ins unendliche.

Bootstrap Config:

$form->setElement("textarea","css",
            array("label"=>"CSS",
                "value"=>"#example1{}
#example2{}
#example3{}",
                "scope" => Shopware\Models\Config\Element::SCOPE_SHOP
            )
        );

Bootstrap Config-Less-Weitergabe :

public function addLessFiles(Enlight_Event_EventArgs $args)
    {
        $shop = $args->getShop();
        $config = $this->collection->getConfig($this->name,$shop);

        $less = new \Shopware\Components\Theme\LessDefinition(
        /* Configuration */
            array(
                'css' => $config->get('css')
            ),
            /* Less files to compile */
            array( __DIR__. '/Views/responsive/frontend/_public/src/less/all.less'),
            /* Import directory */
            __DIR__
        );

        return new Doctrine\Common\Collections\ArrayCollection(array($less));
    }

LESS-Datei:

@css

Hat hier jemand einen Rat?

2

In der Console kommt: 

"You're trying to decode an invalid JSON String: 
<h2 style="text-align: left;"><span>Uppps! Diese Seite ist gar nicht da...</span></h2>

Die nachfolgenden Hinweise sollten Ihnen weiterhelfen.

ParseError: Unexpected input in all.less on line 1, column 0
1| @css: #example1{}
2| #example2{}
3| #example3{} ; in vendor/oyejorge/less.php/lib/Less/Parser.php on line 535
Stack trace:

#0 vendor/oyejorge/less.php/lib/Less/Parser.php(474): Less_Parser->GetRules(NULL)
#1 vendor/oyejorge/less.php/lib/Less/Parser.php(366): Less_Parser->_parse()
#2 Shopware/Components/Theme/LessCompiler/Oyejorge.php(74): Less_Parser->ModifyVars(Array)
#3 Shopware/Components/Theme/Compiler.php(574): Shopware\Components\Theme\LessCompiler\Oyejorge->setVariables(Array)
#4 Shopware/Components/Theme/Compiler.php(201): Shopware\Components\Theme\Compiler->compileLessDefinition(Object(Shopware\Models\Shop\Shop), Object(Shopware\Components\Theme\LessDefinition))
#5 Shopware/Controllers/Backend/Cache.php(174): Shopware\Components\Theme\Compiler->compileLess('new', Object(Shopware\Proxies\ __CG__ \Shopware\Models\Shop\Template), Object(Shopware\Models\Shop\Shop))
#6 Enlight/Controller/Action.php(158): Shopware_Controllers_Backend_Cache->themeCacheWarmUpAction()
#7 Enlight/Controller/Dispatcher/Default.php(523): Enlight_Controller_Action->dispatch('themeCacheWarmU...')
#8 Enlight/Controller/Front.php(226): Enlight_Controller_Dispatcher_Default->dispatch(Object(Enlight_Controller_Request_RequestHttp), Object(Enlight_Controller_Response_ResponseHttp))
#9 Shopware/Kernel.php(153): Enlight_Controller_Front->dispatch()
#10 vendor/symfony/http-kernel/HttpCache/HttpCache.php(492): Shopware\Kernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#11 Shopware/Components/HttpCache/AppCache.php(255): Symfony\Component\HttpKernel\HttpCache\HttpCache->forward(Object(Symfony\Component\HttpFoundation\Request), true, NULL)
#12 vendor/symfony/http-kernel/HttpCache/HttpCache.php(263): Shopware\Components\HttpCache\AppCache->forward(Object(Symfony\Component\HttpFoundation\Request), true)
#13 Shopware/Components/HttpCache/AppCache.php(103): Symfony\Component\HttpKernel\HttpCache\HttpCache->pass(Object(Symfony\Component\HttpFoundation\Request), true)
#14 shopware.php(101): Shopware\Components\HttpCache\AppCache->handle(Object(Symfony\Component\HttpFoundation\Request))
#15 {main}

 "

Ich schätze mal es dürfen keine geschweiften Klammern übergeben werden? Wie löst man das Problem?

3

Ich denke du darfst keinen CSS Code in eine Less Variable packen. Less-Variablen dürfen nur konkrete Werte beinhalten. Korrigiert mich wenn ich falsch liege.

Dagegen gilt aber folgendes: Jeder CSS Code ist automatisch Less Code. 

Daher könntest du folgendes machen:

public function addLessFiles(Enlight_Event_EventArgs $args)
    {
        $shop = $args->getShop();
        $config = $this->collection->getConfig($this->name,$shop);

        // !NEU! schreibe den CSS Code direkt in die all.less
        file_put_contents( __DIR__. '/Views/responsive/frontend/_public/src/less/all.less',$config->get('css'));
        $less = new \Shopware\Components\Theme\LessDefinition(
            // !NEU! hier wird nichts mehr übergeben
            array(),
            /* Less files to compile */
            array( __DIR__. '/Views/responsive/frontend/_public/src/less/all.less'),
            /* Import directory */
            __DIR__
        );

        return new Doctrine\Common\Collections\ArrayCollection(array($less));
    }

Wenn du noch andere Less-Styles hast, kannst du den CSS Code auch in eine andere Datei schreiben (z.B. custom.less) und dann via ‘import’ von der all.less einbinden.

Viele Grüße

1 „Gefällt mir“