Magento 2 and Client Side Less Compilation
I have stock Magento 2 installed and running with a custom theme that uses the 'blank' theme as its parent.
My custom theme is active on my store and it works, I can create my own styles and template files and all is good.
I am at the point where I am trying to style my theme and I want to make use of Live CSS/LESS Updates.
I am using Chrome as my development browser.
Now, when I set Magento 2 to Client Side LESS Compilation, my page loads correctly as expected, however, when I inspect an element in the devtools of the browser, instead of seeing which file has the active styles, instead I am seeing style tags.
This is my first time using LESS, how do I go about fixing this so that the file names appear when inspecting elements.
magento2 magento-2.1 theme less-css
edited Dec 17 '16 at 2:55
Khoa TruongDinh
20.9k63884
asked Dec 17 '16 at 2:22
Peter APeter A
25628
bumped to the homepage by Community♦ yesterday
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
I have stock Magento 2 installed and running with a custom theme that uses the 'blank' theme as its parent.
My custom theme is active on my store and it works, I can create my own styles and template files and all is good.
I am at the point where I am trying to style my theme and I want to make use of Live CSS/LESS Updates.
I am using Chrome as my development browser.
Now, when I set Magento 2 to Client Side LESS Compilation, my page loads correctly as expected, however, when I inspect an element in the devtools of the browser, instead of seeing which file has the active styles, instead I am seeing style tags.
This is my first time using LESS, how do I go about fixing this so that the file names appear when inspecting elements.
magento2 magento-2.1 theme less-css
edited Dec 17 '16 at 2:55
Khoa TruongDinh
20.9k63884
asked Dec 17 '16 at 2:22
Peter APeter A
25628
bumped to the homepage by Community♦ yesterday
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
I have stock Magento 2 installed and running with a custom theme that uses the 'blank' theme as its parent.
My custom theme is active on my store and it works, I can create my own styles and template files and all is good.
I am at the point where I am trying to style my theme and I want to make use of Live CSS/LESS Updates.
I am using Chrome as my development browser.
Now, when I set Magento 2 to Client Side LESS Compilation, my page loads correctly as expected, however, when I inspect an element in the devtools of the browser, instead of seeing which file has the active styles, instead I am seeing style tags.
This is my first time using LESS, how do I go about fixing this so that the file names appear when inspecting elements.
magento2 magento-2.1 theme less-css
edited Dec 17 '16 at 2:55
Khoa TruongDinh
20.9k63884
asked Dec 17 '16 at 2:22
Peter APeter A
25628
I have stock Magento 2 installed and running with a custom theme that uses the 'blank' theme as its parent.
My custom theme is active on my store and it works, I can create my own styles and template files and all is good.
I am at the point where I am trying to style my theme and I want to make use of Live CSS/LESS Updates.
I am using Chrome as my development browser.
Now, when I set Magento 2 to Client Side LESS Compilation, my page loads correctly as expected, however, when I inspect an element in the devtools of the browser, instead of seeing which file has the active styles, instead I am seeing style tags.
This is my first time using LESS, how do I go about fixing this so that the file names appear when inspecting elements.
magento2 magento-2.1 theme less-css
magento2 magento-2.1 theme less-css
edited Dec 17 '16 at 2:55
Khoa TruongDinh
20.9k63884
asked Dec 17 '16 at 2:22
Peter APeter A
25628
edited Dec 17 '16 at 2:55
Khoa TruongDinh
20.9k63884
asked Dec 17 '16 at 2:22
Peter APeter A
25628
edited Dec 17 '16 at 2:55
Khoa TruongDinh
20.9k63884
edited Dec 17 '16 at 2:55
Khoa TruongDinh
20.9k63884
edited Dec 17 '16 at 2:55
Khoa TruongDinh
20.9k63884
20.9k63884
asked Dec 17 '16 at 2:22
Peter APeter A
25628
asked Dec 17 '16 at 2:22
Peter APeter A
25628
asked Dec 17 '16 at 2:22
Peter APeter A
25628
25628
bumped to the homepage by Community♦ yesterday
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
bumped to the homepage by Community♦ yesterday
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You should use Server side less compilation with Grunt.
STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Server side less compilation
Remember to delete the static content and deploy again.
answered Dec 17 '16 at 2:46
Khoa TruongDinhKhoa TruongDinh
20.9k63884
If I use Server Side LESS Compilation, the less.js file is not loaded and I therefore cannot useless.watch();to monitor changes on the go. Is what I am seeing normal behaviour?
– Peter A
Dec 17 '16 at 2:56
Did you use Grunt?
– Khoa TruongDinh
Dec 17 '16 at 3:02
Yes, I am using Grunt.
– Peter A
Dec 17 '16 at 4:47
i see now, this is the first time I am using Grunt as well. What your saying is to put it into Server Side Compilation, then use Grunt to watch for changes in the Theme. I take it this method will allow me to make all the changes I want without having to have to have to constantly flush cache, etc? Will that allow automatic updates in the browser without a refresh?
– Peter A
Dec 17 '16 at 5:39
Yes, we need to see: devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/…
– Khoa TruongDinh
Dec 17 '16 at 5:50
|
show 3 more comments
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css-preprocess.html
Keep in mind that Client Side LESS Compilation doesn't work in production mode.
I personally suggest for you to use GRUNT for the compilation if you want to be Magento Way.
Take a look what is cached to avoid common mistakes.
answered Dec 4 '18 at 12:04
Gosu PrzmakGosu Przmak
165
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
});
}
});
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f150731%2fmagento-2-and-client-side-less-compilation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You should use Server side less compilation with Grunt.
STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Server side less compilation
Remember to delete the static content and deploy again.
answered Dec 17 '16 at 2:46
Khoa TruongDinhKhoa TruongDinh
20.9k63884
If I use Server Side LESS Compilation, the less.js file is not loaded and I therefore cannot useless.watch();to monitor changes on the go. Is what I am seeing normal behaviour?
– Peter A
Dec 17 '16 at 2:56
Did you use Grunt?
– Khoa TruongDinh
Dec 17 '16 at 3:02
Yes, I am using Grunt.
– Peter A
Dec 17 '16 at 4:47
i see now, this is the first time I am using Grunt as well. What your saying is to put it into Server Side Compilation, then use Grunt to watch for changes in the Theme. I take it this method will allow me to make all the changes I want without having to have to have to constantly flush cache, etc? Will that allow automatic updates in the browser without a refresh?
– Peter A
Dec 17 '16 at 5:39
Yes, we need to see: devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/…
– Khoa TruongDinh
Dec 17 '16 at 5:50
|
show 3 more comments
You should use Server side less compilation with Grunt.
STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Server side less compilation
Remember to delete the static content and deploy again.
answered Dec 17 '16 at 2:46
Khoa TruongDinhKhoa TruongDinh
20.9k63884
If I use Server Side LESS Compilation, the less.js file is not loaded and I therefore cannot useless.watch();to monitor changes on the go. Is what I am seeing normal behaviour?
– Peter A
Dec 17 '16 at 2:56
Did you use Grunt?
– Khoa TruongDinh
Dec 17 '16 at 3:02
Yes, I am using Grunt.
– Peter A
Dec 17 '16 at 4:47
i see now, this is the first time I am using Grunt as well. What your saying is to put it into Server Side Compilation, then use Grunt to watch for changes in the Theme. I take it this method will allow me to make all the changes I want without having to have to have to constantly flush cache, etc? Will that allow automatic updates in the browser without a refresh?
– Peter A
Dec 17 '16 at 5:39
Yes, we need to see: devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/…
– Khoa TruongDinh
Dec 17 '16 at 5:50
|
show 3 more comments
You should use Server side less compilation with Grunt.
STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Server side less compilation
Remember to delete the static content and deploy again.
answered Dec 17 '16 at 2:46
Khoa TruongDinhKhoa TruongDinh
20.9k63884
You should use Server side less compilation with Grunt.
STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Server side less compilation
Remember to delete the static content and deploy again.
answered Dec 17 '16 at 2:46
Khoa TruongDinhKhoa TruongDinh
20.9k63884
edited Dec 17 '16 at 6:01
answered Dec 17 '16 at 2:46
Khoa TruongDinhKhoa TruongDinh
20.9k63884
answered Dec 17 '16 at 2:46
Khoa TruongDinhKhoa TruongDinh
20.9k63884
answered Dec 17 '16 at 2:46
Khoa TruongDinhKhoa TruongDinh
20.9k63884
20.9k63884
If I use Server Side LESS Compilation, the less.js file is not loaded and I therefore cannot useless.watch();to monitor changes on the go. Is what I am seeing normal behaviour?
– Peter A
Dec 17 '16 at 2:56
Did you use Grunt?
– Khoa TruongDinh
Dec 17 '16 at 3:02
Yes, I am using Grunt.
– Peter A
Dec 17 '16 at 4:47
i see now, this is the first time I am using Grunt as well. What your saying is to put it into Server Side Compilation, then use Grunt to watch for changes in the Theme. I take it this method will allow me to make all the changes I want without having to have to have to constantly flush cache, etc? Will that allow automatic updates in the browser without a refresh?
– Peter A
Dec 17 '16 at 5:39
Yes, we need to see: devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/…
– Khoa TruongDinh
Dec 17 '16 at 5:50
|
show 3 more comments
If I use Server Side LESS Compilation, the less.js file is not loaded and I therefore cannot useless.watch();to monitor changes on the go. Is what I am seeing normal behaviour?
– Peter A
Dec 17 '16 at 2:56
Did you use Grunt?
– Khoa TruongDinh
Dec 17 '16 at 3:02
Yes, I am using Grunt.
– Peter A
Dec 17 '16 at 4:47
i see now, this is the first time I am using Grunt as well. What your saying is to put it into Server Side Compilation, then use Grunt to watch for changes in the Theme. I take it this method will allow me to make all the changes I want without having to have to have to constantly flush cache, etc? Will that allow automatic updates in the browser without a refresh?
– Peter A
Dec 17 '16 at 5:39
Yes, we need to see: devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/…
– Khoa TruongDinh
Dec 17 '16 at 5:50
If I use Server Side LESS Compilation, the less.js file is not loaded and I therefore cannot use
less.watch(); to monitor changes on the go. Is what I am seeing normal behaviour?– Peter A
Dec 17 '16 at 2:56
If I use Server Side LESS Compilation, the less.js file is not loaded and I therefore cannot use
less.watch(); to monitor changes on the go. Is what I am seeing normal behaviour?– Peter A
Dec 17 '16 at 2:56
Did you use Grunt?
– Khoa TruongDinh
Dec 17 '16 at 3:02
Did you use Grunt?
– Khoa TruongDinh
Dec 17 '16 at 3:02
Yes, I am using Grunt.
– Peter A
Dec 17 '16 at 4:47
Yes, I am using Grunt.
– Peter A
Dec 17 '16 at 4:47
i see now, this is the first time I am using Grunt as well. What your saying is to put it into Server Side Compilation, then use Grunt to watch for changes in the Theme. I take it this method will allow me to make all the changes I want without having to have to have to constantly flush cache, etc? Will that allow automatic updates in the browser without a refresh?
– Peter A
Dec 17 '16 at 5:39
i see now, this is the first time I am using Grunt as well. What your saying is to put it into Server Side Compilation, then use Grunt to watch for changes in the Theme. I take it this method will allow me to make all the changes I want without having to have to have to constantly flush cache, etc? Will that allow automatic updates in the browser without a refresh?
– Peter A
Dec 17 '16 at 5:39
Yes, we need to see: devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/…
– Khoa TruongDinh
Dec 17 '16 at 5:50
Yes, we need to see: devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/…
– Khoa TruongDinh
Dec 17 '16 at 5:50
|
show 3 more comments
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css-preprocess.html
Keep in mind that Client Side LESS Compilation doesn't work in production mode.
I personally suggest for you to use GRUNT for the compilation if you want to be Magento Way.
Take a look what is cached to avoid common mistakes.
answered Dec 4 '18 at 12:04
Gosu PrzmakGosu Przmak
165
add a comment |
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css-preprocess.html
Keep in mind that Client Side LESS Compilation doesn't work in production mode.
I personally suggest for you to use GRUNT for the compilation if you want to be Magento Way.
Take a look what is cached to avoid common mistakes.
answered Dec 4 '18 at 12:04
Gosu PrzmakGosu Przmak
165
add a comment |
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css-preprocess.html
Keep in mind that Client Side LESS Compilation doesn't work in production mode.
I personally suggest for you to use GRUNT for the compilation if you want to be Magento Way.
Take a look what is cached to avoid common mistakes.
answered Dec 4 '18 at 12:04
Gosu PrzmakGosu Przmak
165
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css-preprocess.html
Keep in mind that Client Side LESS Compilation doesn't work in production mode.
I personally suggest for you to use GRUNT for the compilation if you want to be Magento Way.
Take a look what is cached to avoid common mistakes.
answered Dec 4 '18 at 12:04
Gosu PrzmakGosu Przmak
165
answered Dec 4 '18 at 12:04
Gosu PrzmakGosu Przmak
165
answered Dec 4 '18 at 12:04
Gosu PrzmakGosu Przmak
165
answered Dec 4 '18 at 12:04
Gosu PrzmakGosu Przmak
165
165
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f150731%2fmagento-2-and-client-side-less-compilation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
