Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Commit 54d2b76

Browse files
almarchenkoalmarchenko
authored
Merge pull request #154 from magento/am_53780
moved Grunt info to a separate topic
2 parents 3594164 + d56f812 commit 54d2b76

File tree

3 files changed

+38
-69
lines changed

3 files changed

+38
-69
lines changed

‎guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,17 @@ For each CSS file included in the layouts, LESS preprocessor does the following:
9797

9898
</ol>
9999

100+
#### Styles debugging in server-side compilation mode {#css_debug_server}
101+
102+
In server-side LESS compilation mode, to have your changes applied, clear <code>pub/static/frontend/&lt;Vendor&gt;/&lt;theme&gt;/&lt;locale&gt;</code> by deleting the directory in the file system, and reload the store pages to trigger compilation and publication.
103+
104+
<div class="bs-callout bs-callout-info" id="info">
105+
<p>You might also need to clear the <code>var/cache</code> and <code>var/view_preprocessing</code> directories.</p>
106+
</div>
107+
108+
Alternatively, to streamline the process of applying and debugging styles customizations, in server-side compilation mode, you can use the <a href="http://gruntjs.com/" target="_blank">Grunt JavaScript task runner</a>.
109+
110+
See the [Using Grunt for compiliing .less files]({{page.baseurl}}frontend-dev-guide/css-topics/css_debug.md) topic for details how to install, configure and use Grunt.
100111

101112
<h3 id="client-side">Client-side LESS compilation</h3>
102113
The client-side compilation flow is similar to server-side. The difference is in the set of files, published to <code>pub/static</code> on the <a href="#compile_last">last step</a>. In the client-side mode, the following files are published to the <code>pub/static/frontend/&lt;Vendor&gt;/&lt;theme&gt;/&lt;locale&gt;</code> directory:
@@ -107,6 +118,25 @@ The client-side compilation flow is similar to server-side. The difference is in
107118
<li>symlinks to the <code>.less</code> files included to the root source files using the imported by <code>@magento_import</code> and <code>@import</code> directives</li>
108119
</ul>
109120

121+
#### Styles debugging in client-side compilation mode {#css_debug_client}
122+
123+
Client-side LESS compilation is implemented using the native `less.js` library. The default configuration is set in <code>lib/web/less/config.less.js</code>; you can change it as needed.
124+
125+
You can find the detailed information about the configuration and other options of the <code>less.js</code> used in a browser at <a href="http://lesscss.org/usage/#using-less-in-the-browser" target="_blank">http://lesscss.org/usage/#using-less-in-the-browser</a>.
126+
127+
In client-side compilation mode, most of the stylesheet customizations display immediately after you reload a page in a browser.
128+
129+
<span id="css_exception">There are certain types of changes</span>, that require you to clear the <code>pub/static/frontend/&lt;Vendor&gt;/&lt;theme&gt;/&lt;locale&gt;</code> directory and trigger the compilation and <a href="{{page.baseurl}}architecture/view/static-process.html#publish-static-view-files" target="_blank">publication</a> processes anew.
130+
131+
This is required in the following cases:
132+
<ul>
133+
<li>If you change the <a href="{{page.baseurl}}frontend-dev-guide/css-topics/css-preprocess.html#css_preprocess_terms" target="_blank">root source files</a> that contain the <code>@magento_import</code> directive, or the <code>@import</code> directive where the imported file is specified without extension.</li>
134+
<li>If you rename, remove, or add a <code>.less</code> file imported with a <code>@magento_import</code> or <code>@import</code> directive but you did not correct the directives accordingly.</li>
135+
136+
</ul>
137+
138+
To clear the <code>pub/static/frontend/&lt;Vendor&gt;/&lt;theme&gt;/&lt;locale&gt;</code> directory, delete the directory in the file system, and reload the store pages in a browser to trigger compilation and publication.
139+
110140
<h2 id="fedg_css-magento-import">The @magento_import directive</h2>
111141

112142
<p><code>@magento_import</code> is a Magento-specific LESS directive that allows including multiple files by a name pattern. It is used to include files with the same name from the different locations, for example, different modules.

‎guides/v2.0/frontend-dev-guide/css-topics/css_debug.md

Lines changed: 3 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
layout: default
33
group: fedg
44
subgroup: D_CSS
5-
title: Styles debugging
5+
title: Using Grunt for compiling .less files
66
menu_order: 4
7-
menu_title: Styles debugging
7+
menu_title: Using Grunt for compiling .less files
88
version: 2.0
99
github_link: frontend-dev-guide/css-topics/css_debug.md
1010
redirect_from: /guides/v1.0/frontend-dev-guide/css-topics/css_debug.html
@@ -13,7 +13,7 @@ redirect_from: /guides/v1.0/frontend-dev-guide/css-topics/css_debug.html
1313
<h2>What's in this topic</h2>
1414

1515
<p>
16-
The topic describes how the changes you make in stylesheets are applied in the client-side and server-side LESS <a href="{{page.baseurl}}frontend-dev-guide/css-topics/css-preprocess.html" target="_blank">compilation modes</a>, and suggests the approaches and tools you can use to streamline the process of applying and debugging customizations. </p>
16+
The topic describes how to install, configure and use <a href="http://gruntjs.com/" target="_blank">Grunt JavaScript task runner</a> for compiling <code>.less</code> files in Magento 2. </p>
1717

1818
**Contents**
1919

@@ -23,36 +23,6 @@ The topic describes how the changes you make in stylesheets are applied in the c
2323
## Prerequisites
2424
Make sure that you [set]({{page.baseurl}}config-guide/cli/config-cli-subcommands-mode.html) your Magento application to the developer or default [mode]({{page.baseurl}}config-guide/bootstrap/magento-modes.html).
2525

26-
## Styles debugging in client-side compilation mode {#css_debug_client}
27-
28-
Client-side LESS compilation is implemented using the native `less.js` library. The default configuration is set in <code>lib/web/less/config.less.js</code>; you can change it as needed.
29-
30-
You can find the detailed information about the configuration and other options of the <code>less.js</code> used in a browser at <a href="http://lesscss.org/usage/#using-less-in-the-browser" target="_blank">http://lesscss.org/usage/#using-less-in-the-browser</a>.
31-
32-
In client-side compilation mode, most of the stylesheet customizations display immediately after you reload a page in a browser.
33-
34-
<span id="css_exception">There are certain types of changes</span>, that require you to clear the <code>pub/static/frontend/&lt;Vendor&gt;/&lt;theme&gt;/&lt;locale&gt;</code> directory and trigger the compilation and <a href="{{page.baseurl}}architecture/view/static-process.html#publish-static-view-files" target="_blank">publication</a> processes anew.
35-
36-
This is required in the following cases:
37-
<ul>
38-
<li>If you change the <a href="{{page.baseurl}}frontend-dev-guide/css-topics/css-preprocess.html#css_preprocess_terms" target="_blank">root source files</a> that contain the <code>@magento_import</code> directive, or the <code>@import</code> directive where the imported file is specified without extension.</li>
39-
<li>If you rename, remove, or add a <code>.less</code> file imported with a <code>@magento_import</code> or <code>@import</code> directive but you did not correct the directives accordingly.</li>
40-
41-
</ul>
42-
43-
To clear the <code>pub/static/frontend/&lt;Vendor&gt;/&lt;theme&gt;/&lt;locale&gt;</code> directory, delete the directory in the file system, and reload the store pages in a browser to trigger compilation and publication.
44-
45-
## Styles debugging in server-side compilation mode {#css_debug_server}
46-
47-
In server-side LESS compilation mode, to have your changes applied, clear <code>pub/static/frontend/&lt;Vendor&gt;/&lt;theme&gt;/&lt;locale&gt;</code> by deleting the directory in the file system, and reload the store pages to trigger compilation and publication.
48-
49-
<div class="bs-callout bs-callout-info" id="info">
50-
<p>You might also need to clear the <code>var/cache</code> and <code>var/view_preprocessing</code> directories.</p>
51-
</div>
52-
53-
Alternatively, to streamline the process of applying and debugging styles customizations, in server-side compilation mode, you can use the <a href="http://gruntjs.com/" target="_blank">Grunt JavaScript task runner</a>.
54-
55-
The following section describes in details how to install, configure and use Grunt for styles debugging.
5626

5727
### Installing and configuring Grunt {#grunt_prereq}
5828

‎guides/v2.1/frontend-dev-guide/css-topics/css_debug.md

Lines changed: 5 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
layout: default
33
group: fedg
44
subgroup: D_CSS
5-
title: Styles debugging
5+
title: Using Grunt for compiling .less files
66
menu_order: 4
7-
menu_title: Styles debugging
8-
version: 2.0
7+
menu_title: Using Grunt for compiling .less files
8+
version: 2.1
99
github_link: frontend-dev-guide/css-topics/css_debug.md
10-
redirect_from: /guides/v1.0/frontend-dev-guide/css-topics/css_debug.html
1110
---
1211

1312
<h2>What's in this topic</h2>
1413

1514
<p>
16-
The topic describes how the changes you make in stylesheets are applied in the client-side and server-side LESS <a href="{{page.baseurl}}frontend-dev-guide/css-topics/css-preprocess.html" target="_blank">compilation modes</a>, and suggests the approaches and tools you can use to streamline the process of applying and debugging customizations. </p>
15+
The topic describes how to install, configure and use <a href="http://gruntjs.com/" target="_blank">Grunt JavaScript task runner</a> for compiling <code>.less</code> files in Magento 2. </p>
16+
1717

1818
**Contents**
1919

@@ -23,37 +23,6 @@ The topic describes how the changes you make in stylesheets are applied in the c
2323
## Prerequisites
2424
Make sure that you [set]({{page.baseurl}}config-guide/cli/config-cli-subcommands-mode.html) your Magento application to the developer or default [mode]({{page.baseurl}}config-guide/bootstrap/magento-modes.html).
2525

26-
## Styles debugging in client-side compilation mode {#css_debug_client}
27-
28-
Client-side LESS compilation is implemented using the native `less.js` library. The default configuration is set in <code>lib/web/less/config.less.js</code>; you can change it as needed.
29-
30-
You can find the detailed information about the configuration and other options of the <code>less.js</code> used in a browser at <a href="http://lesscss.org/usage/#using-less-in-the-browser" target="_blank">http://lesscss.org/usage/#using-less-in-the-browser</a>.
31-
32-
In client-side compilation mode, most of the stylesheet customizations display immediately after you reload a page in a browser.
33-
34-
<span id="css_exception">There are certain types of changes</span>, that require you to clear the <code>pub/static/frontend/&lt;Vendor&gt;/&lt;theme&gt;/&lt;locale&gt;</code> directory and trigger the compilation and <a href="{{page.baseurl}}architecture/view/static-process.html#publish-static-view-files" target="_blank">publication</a> processes anew.
35-
36-
This is required in the following cases:
37-
<ul>
38-
<li>If you change the <a href="{{page.baseurl}}frontend-dev-guide/css-topics/css-preprocess.html#css_preprocess_terms" target="_blank">root source files</a> that contain the <code>@magento_import</code> directive, or the <code>@import</code> directive where the imported file is specified without extension.</li>
39-
<li>If you rename, remove, or add a <code>.less</code> file imported with a <code>@magento_import</code> or <code>@import</code> directive but you did not correct the directives accordingly.</li>
40-
41-
</ul>
42-
43-
To clear the <code>pub/static/frontend/&lt;Vendor&gt;/&lt;theme&gt;/&lt;locale&gt;</code> directory, delete the directory in the file system, and reload the store pages in a browser to trigger compilation and publication.
44-
45-
## Styles debugging in server-side compilation mode {#css_debug_server}
46-
47-
In server-side LESS compilation mode, to have your changes applied, clear <code>pub/static/frontend/&lt;Vendor&gt;/&lt;theme&gt;/&lt;locale&gt;</code> by deleting the directory in the file system, and reload the store pages to trigger compilation and publication.
48-
49-
<div class="bs-callout bs-callout-info" id="info">
50-
<p>You might also need to clear the <code>var/cache</code> and <code>var/view_preprocessing</code> directories.</p>
51-
</div>
52-
53-
Alternatively, to streamline the process of applying and debugging styles customizations, in server-side compilation mode, you can use the <a href="http://gruntjs.com/" target="_blank">Grunt JavaScript task runner</a>.
54-
55-
The following section describes in details how to install, configure and use Grunt for styles debugging.
56-
5726
### Installing and configuring Grunt {#grunt_prereq}
5827

5928
Magento has built-in Grunt tasks configured, but there are still several prerequisite steps you need to take to be able to use it:

0 commit comments

Comments
 (0)