CSS im Plugin am LESS übergeben

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?

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?

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 Like