2

I have been customizing the landofcoder > Backend extension that creates an adminhtml theme. It lives in the app/code/Ves/Backend folder. However, the only thing I'd like to add is the ability to watch the .css file with grunt watch. Currently, it doesn't see any changes, and I have to continuously manually reload.

I've tried a simple themes.js config, but it could never find the CSS file because it's expecting it elsewhere for an admin theme. If anybody has any pointers, suggestions on how to get the grunt to see the file, that would be amazing. For full reference its:

app/code/Ves/backend/view/adminhtml/web/css/style.css

The Backend extension already has the following in its layout file, app/code/Ves/backend/view/adminhtml/layout/default.xml :

<?xml version="1.0"?> 
<page xmlns:xsi="w3.org/2001/XMLSchema-instance"; xsi:noNamespaceSchemaLocation="urn:magento:framework:View/La‌​yout/etc/page_config‌​uration.xsd"> 
    <head> 
        <css src="Ves_Backend::css/styles.css" order="102"/> 
        <css src="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-a‌​wesome.css" src_type="url"/> 
    </head> 
</page>

Yet the problem persists.

1
  • Hey, did you solve this after all? I'm wondering the same thing (although for frontend). Developing a custom extension in app/code/ and don't want to reload all the time. Commented Sep 11, 2020 at 8:54

1 Answer 1

0

Install NodeJs in your pc

Use comand line:

  • Install Grunt CLI tool globally
npm install -g grunt-cli


* Install the node.js project dependency

npm install


* Remove Magento Cache

php bin/magento cache:clean



* Yor theme is Magento/beckend and Ves/Backend is an extension * You must add in layout to call CSS file:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Ves_Backend::css/style.css"/>
    </head>
</page>



* Clean compiled files by command

grunt clean


* Run CMD command prompt with administrator privilege.

grunt exec:backend
grunt less:backend
grunt watch


https://drive.google.com/a/green-art.ro/file/d/0B_3mauXj4AQINXVoTXlBT2JSUjA/view?usp=sharing


If that does not work grunt watch during development or run software from Php Storm roll back the following commands:
* Remove Magento Cache

php bin/magento cache:clean


* Clean compiled files by command

grunt clean


* Run CMD command prompt with administrator privilege.

grunt exec:backend
grunt less:backend
grunt watch
16
  • The only question, when you say create a folder in the root project, do you mean the node_modules folder for grunt itself, or within the /app/code/Ves/backend folder ? ... or do you mean the root of the magento install itself? Commented Sep 26, 2017 at 19:07
  • "You must create a folder in root project extend_gruntJs_theme". I specified that that folder should create it in the root of the project at the same level as the app. I did not specify anything by node_modules. extend_gruntJs_theme is the name of folder you must create.
    – St3phan
    Commented Sep 27, 2017 at 7:40
  • Ok, that's what I thought you meant, I just wanted to make sure my tired brain was processing that correctly. :) Cheers. Commented Sep 27, 2017 at 19:41
  • ok, so I got around to testing this, and I receive the error ">> [InvalidArgumentException] >> Verify entered values of the argument and options. Unable to resolve the source file for 'frontend/Ves/backend/en_US/css/styles-m.less'" The problem here is that the admin theme style file is actually in /app/code/Ves/Backend/view/adminhtml/web/css/styles.css Commented Sep 28, 2017 at 2:05
  • You need to add permissions for pub/static - magento.stackexchange.com/questions/91870/…
    – St3phan
    Commented Sep 28, 2017 at 7:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.