2

Good afternoon,

I am having a devil of a time getting my front-end flow working. I have grunt CLI working, along with theme.js setup properly (see images below). Still, when I make changes within my {themeDir}web/css/source/_theme.less I do not see the changes. The only time I can see the change is after running a grunt clear command, and the manually reloading the page.

It seems like the change only gets moved to pub/static after that folder is cleaned, and the contents are reloaded. In other words, this is exactly what grunt should be doing for me, from what I understand.

I have been stuck on this for days.

I am able to get the following from grunt exec:{themeName} & grunt less:{themeName}:

grunt exec

grunt less

1

Try this

grunt --force clean:porto && php bin/magento dev:source-theme:deploy css/styles-m css/styles-l --type=less --locale=en_US --area=frontend --theme=Magento/luma --theme=Smartwave/porto

grunt exec:porto && php bin/magento dev:source-theme:deploy css/styles-m css/styles-l --type=less --locale=en_US --area=frontend --theme=Magento/luma --theme=Smartwave/porto

grunt less:porto && php bin/magento dev:source-theme:deploy css/styles-m css/styles-l --type=less --locale=en_US --area=frontend --theme=Smartwave/porto

grunt watch

But Make Sure Define Less Function in /dev/tools/grunt/configs/themes.js

porto: {
    area: 'frontend',
    name: 'Smartwave/porto',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l'
    ],
    dsl: 'less'
},
  • Thank you for your answer. You have some very explicit commands, which is always great! I did run a source-theme: deploy at one point. I posted the answer to my problem above. – AdamJSim May 9 '18 at 14:13
1

Thank you both for your replies! The problem was in my theme.js file - the file grunt-config.json points to. Here is the contents of grunt-config.json:

{
"themes": "dev/tools/grunt/configs/local-themes/themes"
}

In theme.js, I didn't put both website locations in as different items. To be clear, I am in Canada, so my store has an en_US, and en_CA. So for example, I only had one of these, when I really needed both, as shown below:

porto: {
area: 'frontend',
name: 'Smartwave/porto',
locale: 'en_US',
files: [
    'css/styles-m',
    'css/styles-l'
],
dsl: 'less'
},
porto: {
area: 'frontend',
name: 'Smartwave/porto',
locale: 'en_CA',
files: [
    'css/styles-m',
    'css/styles-l'
],
dsl: 'less'
},

This explains why I could see the grunt commands working and compiling, but I saw no changes. The css files being produced were being placed in the pub/static folder for the country that isn't my current view.

Another thread I found suggested changing location in core_config_data in the database. I did that but it didn't work for me. The solution above worked.

0

First install live reload extension in chrome : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en

Run below command one by one

grunt exec:themename

grunt less:themename

grunt watch

Then click on live reload button right top corner in chrome. please review attached screenshots

enter image description here

  • @AdamJSim is that working for you ? – hweb87 May 9 '18 at 5:56
  • Thank you for your instructions. I already had this all setup, but it's useful to leave here for others, just in case. – AdamJSim May 9 '18 at 14:12
0

What are you using for your web server dev environment? One important (and fairly undocumented) detail of LiveReload is that the browser extension tries to connect to 127.0.0.1:35729. When you run grunt watch it starts listening on that port, but a couple things may prevent the connection from working:

  • missing the livereload module
  • your web server isn't listening on 127.0.0.1
  • port is not open (e.g. into Vagrant vm)

These have different solutions, missing the livereload is the simplest to correct, just run npm install -g livereload in your dev environment.

In the case you are not connecting to localhost/127.0.0.1 then you'll need to look at the RemoteLiveReload Chrome extension instead as it tries to connect to the same hostname that is loading the current page - https://github.com/bigwave/livereload-extensions . Don't know if there are options for other browsers.

If the web port is not open, it depends on your particular development environment. For my Vagrant setup, I had to add a forwarded_port line:

config.vm.network :forwarded_port, guest: 35729, host: 35729

You can test that the port is open and listening by starting grunt watch (when livereload node module is installed this also starts the livereload server). Then connect to <hostname>:35729 and when it's working you'll see some json output:

{"tinylr":"Welcome","version":"0.2.1"}

Overall this is a fairly opaque process with several moving parts, good luck!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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