Mrthdrb

Doomsday-clock for my fantasy planet

Could Giant Ground Sloths have been a Good Pack Animal for the Ancient Mayans

Information to fellow intern about hiring?

Latin words with no plurals in English

Why was the "bread communication" in the arena of Catching Fire left out in the movie?

Are white and non-white police officers equally likely to kill black suspects?

Does it makes sense to buy a cycle to learn riding?

Calculate Levenshtein distance between two strings in Python

Is a car considered movable or immovable property?

Input two commands to a new terminal?

How to make payment on the internet without leaving a money trail?

aging parents with no investments

What is GPS' 19 year rollover and does it present a cybersecurity issue?

Are cabin dividers used to "hide" the flex of the airplane?

Could a US political party gain complete control over the government by removing checks & balances?

How to deal with fear of taking dependencies

Crop image to path created in TikZ?

Why did the Germans forbid the possession of pet pigeons in Rostov-on-Don in 1941?

extract characters between two commas?

How did the USSR manage to innovate in an environment characterized by government censorship and high bureaucracy?

What is the meaning of "of trouble" in the following sentence?

What to wear for invited talk in Canada

How to answer pointed "are you quitting" questioning when I don't want them to suspect

Does a dangling wire really electrocute me if I'm standing in water?

Magento 2 Theme Development - grunt watch not detecting changes of custom LESS file

Magento 2 grunt exec does not actually create symlinksWhat are the Magento 2 Grunt commands? From deployment?Magento 2 Theme - grunt watch with overridden module.scssMagento Grunt Less Compilation behaves weirdProblem with extending Luma theme using Grunt with LessGrunt watch doesn't watch _theme.less and custom less fileCan't modify style in custom theme using Gruntmagento 2 Grunt watch loads old css when changing imported css fileGrunt - is it possible to watch custome module less files?(Magento2) Grunt Less problem with a new themeMagento2 LESS extend/override custom themeImport new custom less files after grunt configuration

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

We are running Magento 2 in version 2.3.1, but the error occurred in version 2.3.0 also. The situation is the following:

• we've created a custom theme which has Magento/luma theme as parent.


• according to https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css_debug.html we've installed node and grunt for theme LESS development.


• the grunt themes.js config of our custom child theme has files:['css/styles-m', 'css/styles-l', 'css/style'] entries. (where 'styles-m' and 'styles-l' are files from the parent, and 'css/style' is our custom LESS file)


• our custom LESS file style.less is located in our custom VENDOR/THEME/web/css/ folder and is also registered as <css src="css/style.css" /> within default_head_blocks.xml of our theme.

Now the problem is, that executing commands grunt clean:THEME, grunt exec:THEME, grunt less:THEME and grunt watch will not create symlinked files within pub/static folder. Instead it copies the source stylesheets to the pub folder, and therefore grunt watch will not detect any changes.
Of course I researched and checked solutions like cleaning cache, rebuilding anything and deploying static content before running the grunt tasks. (e.g. Magento 2 grunt exec does not actually create symlinks or What are the Magento 2 Grunt commands? From deployment?)

I also verified that there are no external imports within my custom style.less file. (https://github.com/magento/magento2/issues/1619#issuecomment-377472378) We're running under FreeBSD.

Sadly the Symlink is not created and therefore grunt does not detect changes of my custom 'style.less' file:

Do you have any idea why this happens, or did someone experience the same with m2? Thanks in advance for all your help!

theme css less grunt static-content-deploy

share|improve this question

edited Apr 5 at 9:25

TurnJoke

asked Apr 5 at 7:01

TurnJokeTurnJoke

11

New contributor

TurnJoke is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  u can also enable symlink form backend configuration.
  
  – i_ali55
  Apr 5 at 7:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for your answer! Do you mean the option "allow symlinks" under "shops" -> "configuration" -> "developer"? This option was already enabled.
  
  – TurnJoke
  Apr 5 at 7:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  okay, then you need to enable Developer mode.
  
  – i_ali55
  Apr 5 at 7:26
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  developer mode is also already enabled :) some symlinks are generated, just the ones for my custom theme not.
  
  – TurnJoke
  Apr 5 at 7:27
  
  

  
  
  
  

add a comment | 

0

We are running Magento 2 in version 2.3.1, but the error occurred in version 2.3.0 also. The situation is the following:

• we've created a custom theme which has Magento/luma theme as parent.


• according to https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css_debug.html we've installed node and grunt for theme LESS development.


• the grunt themes.js config of our custom child theme has files:['css/styles-m', 'css/styles-l', 'css/style'] entries. (where 'styles-m' and 'styles-l' are files from the parent, and 'css/style' is our custom LESS file)


• our custom LESS file style.less is located in our custom VENDOR/THEME/web/css/ folder and is also registered as <css src="css/style.css" /> within default_head_blocks.xml of our theme.

Now the problem is, that executing commands grunt clean:THEME, grunt exec:THEME, grunt less:THEME and grunt watch will not create symlinked files within pub/static folder. Instead it copies the source stylesheets to the pub folder, and therefore grunt watch will not detect any changes.
Of course I researched and checked solutions like cleaning cache, rebuilding anything and deploying static content before running the grunt tasks. (e.g. Magento 2 grunt exec does not actually create symlinks or What are the Magento 2 Grunt commands? From deployment?)

I also verified that there are no external imports within my custom style.less file. (https://github.com/magento/magento2/issues/1619#issuecomment-377472378) We're running under FreeBSD.

Sadly the Symlink is not created and therefore grunt does not detect changes of my custom 'style.less' file:

Do you have any idea why this happens, or did someone experience the same with m2? Thanks in advance for all your help!

theme css less grunt static-content-deploy

share|improve this question

edited Apr 5 at 9:25

TurnJoke

asked Apr 5 at 7:01

TurnJokeTurnJoke

11

New contributor

TurnJoke is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  u can also enable symlink form backend configuration.
  
  – i_ali55
  Apr 5 at 7:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for your answer! Do you mean the option "allow symlinks" under "shops" -> "configuration" -> "developer"? This option was already enabled.
  
  – TurnJoke
  Apr 5 at 7:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  okay, then you need to enable Developer mode.
  
  – i_ali55
  Apr 5 at 7:26
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  developer mode is also already enabled :) some symlinks are generated, just the ones for my custom theme not.
  
  – TurnJoke
  Apr 5 at 7:27
  
  

  
  
  
  

add a comment | 

We are running Magento 2 in version 2.3.1, but the error occurred in version 2.3.0 also. The situation is the following:

• we've created a custom theme which has Magento/luma theme as parent.


• according to https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css_debug.html we've installed node and grunt for theme LESS development.


• the grunt themes.js config of our custom child theme has files:['css/styles-m', 'css/styles-l', 'css/style'] entries. (where 'styles-m' and 'styles-l' are files from the parent, and 'css/style' is our custom LESS file)


• our custom LESS file style.less is located in our custom VENDOR/THEME/web/css/ folder and is also registered as <css src="css/style.css" /> within default_head_blocks.xml of our theme.

Now the problem is, that executing commands grunt clean:THEME, grunt exec:THEME, grunt less:THEME and grunt watch will not create symlinked files within pub/static folder. Instead it copies the source stylesheets to the pub folder, and therefore grunt watch will not detect any changes.
Of course I researched and checked solutions like cleaning cache, rebuilding anything and deploying static content before running the grunt tasks. (e.g. Magento 2 grunt exec does not actually create symlinks or What are the Magento 2 Grunt commands? From deployment?)

I also verified that there are no external imports within my custom style.less file. (https://github.com/magento/magento2/issues/1619#issuecomment-377472378) We're running under FreeBSD.

Sadly the Symlink is not created and therefore grunt does not detect changes of my custom 'style.less' file:

Do you have any idea why this happens, or did someone experience the same with m2? Thanks in advance for all your help!

theme css less grunt static-content-deploy

share|improve this question

edited Apr 5 at 9:25

TurnJoke

asked Apr 5 at 7:01

TurnJokeTurnJoke

11

New contributor

TurnJoke is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this question

edited Apr 5 at 9:25

TurnJoke

asked Apr 5 at 7:01

TurnJokeTurnJoke

11

New contributor

TurnJoke is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this question

edited Apr 5 at 9:25

TurnJoke

asked Apr 5 at 7:01

TurnJokeTurnJoke

11

New contributor

TurnJoke is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

asked Apr 5 at 7:01

TurnJokeTurnJoke

11

New contributor

TurnJoke is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

asked Apr 5 at 7:01

TurnJokeTurnJoke

11

1 Answer
1

active

oldest

votes

0

Go to the devtoolsgruntconfigsthemes.js file:

Configure there your theme js just below luma:

themename: 
 area: 'frontend',
 name: 'yourvendor/themename',
 locale: 'en_US',
 files: [
 'css/styles-m',
 'css/styles-l', 
 'css/yourcssfile', 
 ],
 dsl: 'less'
,

Then run below commands serially:

php bin/magento setup:upgrade

grunt exec:themename

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

Now run command:

grunt watch

share|improve this answer

edited Apr 5 at 9:10

answered Apr 5 at 9:04

Chandra Prakash GuptaChandra Prakash Gupta

21126

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi Chandra! Thanks for your answer. Sadly it does not work, the Symlink's still not created and grunt does not detect changes when I update my custom 'style.less' file. (see i.stack.imgur.com/vd11Q.png)
  
  – TurnJoke
  Apr 5 at 9:24
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you want your custom less file, I suggest you other way: Go to appdesignfrontendyourvendorthemenamewebcsssource: Add your _custom.less file. Override _sources.less file in appdesignfrontendyourvendorthemenamewebcsssource and add below line: @import '_custom.less';
  
  – Chandra Prakash Gupta
  Apr 5 at 9:35
  
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

TurnJoke is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f268867%2fmagento-2-theme-development-grunt-watch-not-detecting-changes-of-custom-less-f%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Go to the devtoolsgruntconfigsthemes.js file:

Configure there your theme js just below luma:

themename: 
 area: 'frontend',
 name: 'yourvendor/themename',
 locale: 'en_US',
 files: [
 'css/styles-m',
 'css/styles-l', 
 'css/yourcssfile', 
 ],
 dsl: 'less'
,

Then run below commands serially:

php bin/magento setup:upgrade

grunt exec:themename

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

Now run command:

grunt watch

share|improve this answer

edited Apr 5 at 9:10

answered Apr 5 at 9:04

Chandra Prakash GuptaChandra Prakash Gupta

21126

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi Chandra! Thanks for your answer. Sadly it does not work, the Symlink's still not created and grunt does not detect changes when I update my custom 'style.less' file. (see i.stack.imgur.com/vd11Q.png)
  
  – TurnJoke
  Apr 5 at 9:24
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you want your custom less file, I suggest you other way: Go to appdesignfrontendyourvendorthemenamewebcsssource: Add your _custom.less file. Override _sources.less file in appdesignfrontendyourvendorthemenamewebcsssource and add below line: @import '_custom.less';
  
  – Chandra Prakash Gupta
  Apr 5 at 9:35
  
  

  
  
  
  

add a comment | 

0

Go to the devtoolsgruntconfigsthemes.js file:

Configure there your theme js just below luma:

themename: 
 area: 'frontend',
 name: 'yourvendor/themename',
 locale: 'en_US',
 files: [
 'css/styles-m',
 'css/styles-l', 
 'css/yourcssfile', 
 ],
 dsl: 'less'
,

Then run below commands serially:

php bin/magento setup:upgrade

grunt exec:themename

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

Now run command:

grunt watch

share|improve this answer

edited Apr 5 at 9:10

answered Apr 5 at 9:04

Chandra Prakash GuptaChandra Prakash Gupta

21126

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi Chandra! Thanks for your answer. Sadly it does not work, the Symlink's still not created and grunt does not detect changes when I update my custom 'style.less' file. (see i.stack.imgur.com/vd11Q.png)
  
  – TurnJoke
  Apr 5 at 9:24
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you want your custom less file, I suggest you other way: Go to appdesignfrontendyourvendorthemenamewebcsssource: Add your _custom.less file. Override _sources.less file in appdesignfrontendyourvendorthemenamewebcsssource and add below line: @import '_custom.less';
  
  – Chandra Prakash Gupta
  Apr 5 at 9:35
  
  

  
  
  
  

add a comment | 

Go to the devtoolsgruntconfigsthemes.js file:

Configure there your theme js just below luma:

themename: 
 area: 'frontend',
 name: 'yourvendor/themename',
 locale: 'en_US',
 files: [
 'css/styles-m',
 'css/styles-l', 
 'css/yourcssfile', 
 ],
 dsl: 'less'
,

Then run below commands serially:

php bin/magento setup:upgrade

grunt exec:themename

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

Now run command:

grunt watch

share|improve this answer

edited Apr 5 at 9:10

answered Apr 5 at 9:04

Chandra Prakash GuptaChandra Prakash Gupta

21126

themename: 
 area: 'frontend',
 name: 'yourvendor/themename',
 locale: 'en_US',
 files: [
 'css/styles-m',
 'css/styles-l', 
 'css/yourcssfile', 
 ],
 dsl: 'less'
,

share|improve this answer

edited Apr 5 at 9:10

answered Apr 5 at 9:04

Chandra Prakash GuptaChandra Prakash Gupta

21126

answered Apr 5 at 9:04

Chandra Prakash GuptaChandra Prakash Gupta

21126

answered Apr 5 at 9:04

Chandra Prakash GuptaChandra Prakash Gupta

21126