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.

TheNorthern_Light
  • 484
  • 7
  • 21
  • 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. – simonthesorcerer Sep 11 '20 at 08:54

1 Answers1

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
St3phan
  • 2,907
  • 1
  • 25
  • 49
  • 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?

     – TheNorthern_Light Sep 26 '17 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 Sep 27 '17 at 07:40
  • Ok, that's what I thought you meant, I just wanted to make sure my tired brain was processing that correctly. :) Cheers. – TheNorthern_Light Sep 27 '17 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

     – TheNorthern_Light Sep 28 '17 at 02:05
  • You need to add permissions for pub/static - https://magento.stackexchange.com/questions/91870/magento-2-folder-file-permissions – St3phan Sep 28 '17 at 07:19
  • I updated my answer. I think your the backend theme is Magento/backend – St3phan Sep 28 '17 at 07:37
  • Do you mean I need to update the Magento/backend layout/default.xml or from Ves/backup ? (The Ves/Backend/view/adminhtml/layout/default.xml already has exactly what you typed). I'm not sure how you have changed your answer, that makes it any different then a standard grunt execution. – TheNorthern_Light Oct 02 '17 at 15:13
  • this is a new code in my answare ` ` – St3phan Oct 02 '17 at 15:15
  • Ok, thats what I was saying, the Backend extension already has that in the default.xml file: " "

    Yet the problem persists.

     – TheNorthern_Light Oct 02 '17 at 18:59
  • Why you have this <css src="Ves_Backend::css/styles.css" order="102"/> in current theme and not in extension ? – St3phan Oct 03 '17 at 07:47
  • if you want to be helped, you have to ask the complete question, I now see that you have more stuff I do not know about. – St3phan Oct 03 '17 at 07:50
  • I would like to say thanks for trying to help, I did however clarify this in my post a few days ago.

    To try and explain this in a different way. The extension (free from landofcoder.com) is an APP extension, that creates an adminhtml theme using a simply web/css web/images directory within the app/code/Ves/Backend extension itself. It does NOT create any files/folders in app/design. So it seems that Grunt never SEE's the styles.css file within the extension itself. Within that extension there is:

     – TheNorthern_Light Oct 03 '17 at 15:58
  • I can you help to remote. – St3phan Oct 03 '17 at 16:01
  • app/code/Ves/Backend.. app/code/Ves/Backend/registration.php app/code/Ves/Backend/composer.json ..etc/module.xml ..etc/adminhtml/system.xml ..etc/adminhtml/menu.xml ..view/adminhtml/layout/default.xml ..view/adminhtml/layout/web/css/styles.css ..view/adminhtml/layout/web/images/*.jpg – TheNorthern_Light Oct 03 '17 at 16:01
  • where you from? – St3phan Oct 03 '17 at 16:03
  • @TheNorthern_Light well looks like this was a waste of everyone's time :) By chance were you able to figure this out? Obviously a css file that is part of a working extension is already going to be included in layout xml. The issue is that the grunt task for watch just doesn't know to also watch .css files, and the exec task doesn't create symlinks for .css files in an extension folder in app/code/{extension} or app/design/{extension}. There is something we need to modify in /dev/tools/ – grok_in_full Mar 30 '21 at 13:56