Skip to main content

As the question is for js and cssjs and css update in magento 2Magento 2 in developerdeveloper mode.

  1. Updating the JS in your respected module,before refreshing page the same file from pub/static/frontend/namespace/theme/ ... module/js/... delete it so after page refresh fresh JS file will generate in pub folder.
  2. Updating the CSS in your respected module, do the pt 1.
  3. Updating Less file

Setup theme in magento ...\dev\tools\grunt\configs\themes.js

Clone any one theme example luma theme to your theme and assign a name suppose xyz

xyz: { area: 'frontend', name: 'Magento/luma', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' }

xyz: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    }

In root folder change file name : Gruntfile.js.sample to Gruntfile.js

In root folder change file name : package.json.sample to package.json

Need to have grunt in you site folder else install via npm

Open command prompt with administrator permission

Go to site folder in CMD & hit command

   grunt exec:theme for first time after deploy the theme

thenThen grunt less:theme every time if we do any changes in less

if usingIf you are doing frequently changes in less use grunt watch so it will automatic hit grunt less:theme

Note : You might get Symlink error so go to file .../app/etc/di.xml and comment out or remove code (below code ) in you local till development done, don't push chnaged code of this file to server, it only required in local if need.

Note : You might get Symlink error so go to file .../app/etc/di.xml and comment out or remove code (below code ) in you local till development done, don't push chnaged code of this file to server, it only required in local if need.

<item name="view_preprocessed" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink</item>

<item name="view_preprocessed" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink</item>

As the question for js and css update in magento 2 in developer mode.

  1. Updating the JS in your respected module,before refreshing page the same file from pub/static/frontend/namespace/theme/ ... module/js/... delete it so after page refresh fresh JS file will generate in pub folder.
  2. Updating the CSS in your respected module, do the pt 1.
  3. Updating Less file

Setup theme in magento ...\dev\tools\grunt\configs\themes.js

Clone any one theme example luma theme to your theme and assign a name suppose xyz

xyz: { area: 'frontend', name: 'Magento/luma', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' }

In root folder change file name : Gruntfile.js.sample to Gruntfile.js

In root folder change file name : package.json.sample to package.json

Need to have grunt in you site folder else install via npm

Open command prompt with administrator permission

Go to site folder in CMD & hit command

 grunt exec:theme for first time after deploy the theme

then grunt less:theme every time if we do any changes in less

if using frequently changes in less use grunt watch so it will automatic hit grunt less:theme

Note : You might get Symlink error so go to file .../app/etc/di.xml and comment out or remove code (below code ) in you local till development done, don't push chnaged code of this file to server, it only required in local if need.

<item name="view_preprocessed" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink</item>

As the question is for js and css update in Magento 2 in developer mode.

  1. Updating the JS in your respected module,before refreshing page the same file from pub/static/frontend/namespace/theme/ ... module/js/... delete it so after page refresh fresh JS file will generate in pub folder.
  2. Updating the CSS in your respected module, do the pt 1.
  3. Updating Less file

Setup theme in magento ...\dev\tools\grunt\configs\themes.js

Clone any one theme example luma theme to your theme and assign a name suppose xyz

xyz: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    }

In root folder change file name : Gruntfile.js.sample to Gruntfile.js

In root folder change file name : package.json.sample to package.json

Need to have grunt in you site folder else install via npm

Open command prompt with administrator permission

Go to site folder in CMD & hit command  grunt exec:theme for first time after deploy the theme

Then grunt less:theme every time if we do any changes in less

If you are doing frequently changes in less use grunt watch so it will automatic hit grunt less:theme

Note : You might get Symlink error so go to file .../app/etc/di.xml and comment out or remove code (below code ) in you local till development done, don't push chnaged code of this file to server, it only required in local if need.

<item name="view_preprocessed" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink</item>
added 369 characters in body
Source Link
Kanhaiya lal
  • 1.6k
  • 12
  • 24

As the question for js and css update in magento 2 in developer mode.

  1. Updating the JS in your respected module,before refreshing page the same file from pub/static/frontend/namespace/theme/ ... module/js/... delete it so after page refresh fresh JS file will generate in pub folder.
  2. Updating the CSS in your respected module, do the pt 1.
  3. Updating Less file

Setup theme in magento ...\dev\tools\grunt\configs\themes.js

Clone any one theme example luma theme to your theme and assign a name suppose xyz

xyz: { area: 'frontend', name: 'Magento/luma', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' }

In root folder change file name : Gruntfile.js.sample to Gruntfile.js

In root folder change file name : package.json.sample to package.json

Need to have grunt in you site folder else install via npm

Open command prompt with administrator permission

Go to site folder in CMD & hit command

grunt exec:theme for first time after deploy the theme

then grunt less:theme every time if we do any changes in less

if using frequently changes in less use grunt watch so it will automatic hit grunt less:theme

Note : You might get Symlink error so go to file .../app/etc/di.xml and comment out or remove code (below code ) in you local till development done, don't push chnaged code of this file to server, it only required in local if need.

<item name="view_preprocessed" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink</item>

As the question for js and css update in magento 2 in developer mode.

  1. Updating the JS in your respected module,before refreshing page the same file from pub/static/frontend/namespace/theme/ ... module/js/... delete it so after page refresh fresh JS file will generate in pub folder.
  2. Updating the CSS in your respected module, do the pt 1.
  3. Updating Less file

Setup theme in magento ...\dev\tools\grunt\configs\themes.js

Clone any one theme example luma theme to your theme and assign a name suppose xyz

xyz: { area: 'frontend', name: 'Magento/luma', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' }

In root folder change file name : Gruntfile.js.sample to Gruntfile.js

In root folder change file name : package.json.sample to package.json

Need to have grunt in you site folder else install via npm

Open command prompt with administrator permission

Go to site folder in CMD & hit command

grunt exec:theme for first time after deploy the theme

then grunt less:theme every time if we do any changes in less

if using frequently changes in less use grunt watch so it will automatic hit grunt less:theme

As the question for js and css update in magento 2 in developer mode.

  1. Updating the JS in your respected module,before refreshing page the same file from pub/static/frontend/namespace/theme/ ... module/js/... delete it so after page refresh fresh JS file will generate in pub folder.
  2. Updating the CSS in your respected module, do the pt 1.
  3. Updating Less file

Setup theme in magento ...\dev\tools\grunt\configs\themes.js

Clone any one theme example luma theme to your theme and assign a name suppose xyz

xyz: { area: 'frontend', name: 'Magento/luma', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' }

In root folder change file name : Gruntfile.js.sample to Gruntfile.js

In root folder change file name : package.json.sample to package.json

Need to have grunt in you site folder else install via npm

Open command prompt with administrator permission

Go to site folder in CMD & hit command

grunt exec:theme for first time after deploy the theme

then grunt less:theme every time if we do any changes in less

if using frequently changes in less use grunt watch so it will automatic hit grunt less:theme

Note : You might get Symlink error so go to file .../app/etc/di.xml and comment out or remove code (below code ) in you local till development done, don't push chnaged code of this file to server, it only required in local if need.

<item name="view_preprocessed" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink</item>

Source Link
Kanhaiya lal
  • 1.6k
  • 12
  • 24

As the question for js and css update in magento 2 in developer mode.

  1. Updating the JS in your respected module,before refreshing page the same file from pub/static/frontend/namespace/theme/ ... module/js/... delete it so after page refresh fresh JS file will generate in pub folder.
  2. Updating the CSS in your respected module, do the pt 1.
  3. Updating Less file

Setup theme in magento ...\dev\tools\grunt\configs\themes.js

Clone any one theme example luma theme to your theme and assign a name suppose xyz

xyz: { area: 'frontend', name: 'Magento/luma', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' }

In root folder change file name : Gruntfile.js.sample to Gruntfile.js

In root folder change file name : package.json.sample to package.json

Need to have grunt in you site folder else install via npm

Open command prompt with administrator permission

Go to site folder in CMD & hit command

grunt exec:theme for first time after deploy the theme

then grunt less:theme every time if we do any changes in less

if using frequently changes in less use grunt watch so it will automatic hit grunt less:theme