less file, except the root source files, run the less task and reload the page. After you customize the content of any.After you switch the compilation mode from client-side to server-side, run the exec command.The following shows which Grunt tasks to use for debugging: Use cases of tracking changes using Grunt css files, and reloads the page in the browser. Tracks the changes in the source files, recompiles. Use grunt less: to use the symlinks published for a specific theme. Use grunt exec: to republish symlinks for a specific theme.Ĭompiles CSS files using the symlinks published in the pub/static/frontend/ directory. Republishes symlinks to the source files to the pub/static/frontend/ directory. Removes the theme related static files in the pub/static and var directories. Run all commands from your Magento installation directory. The following table describes the grunt commands you can use to perform different customization tasks.
#SERVER FILEWATCHER TO RECOMPILE SASS INSTALL#
(Optional) If you want to use Grunt for “watching” changes automatically, without reloading pages in a browser each time, install the LiveReload extension in your browser. IMPORTANT NOTE : If grunt gives the error “Error: Cannot find module ….”, check the path in your grunt-config.json file and correct as necessary. If your theme inherits from a certain theme, and does not contain its own root source files, specify the root source files of the parent theme. You need to specify all root source files of the theme.
#SERVER FILEWATCHER TO RECOMPILE SASS HOW TO#
How to Make Your Theme Responsive and Mobile.Simple style changes with client-side LESS compilation vs.Simple ways to customize a theme's styles.Use Sass preprocessor and Gulp task runner.Conventional notations used in this Guide.Similar in output paths to refresh: $FileParentDir$/css/$FileNameWithoutExtension$.css:$FileParentDir$/css/$FileNameWithoutExtension$.css. (set the css in the css subfolder of the parent directory) In arguments I use: $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css If you want scss files in one folder and css in another this structure might be similar to mine: theme To select the program you can set sass.cmd and find it in your appdata folder of your user accout (\AppData\Roaming\npm\sass.cmd) Make sure the pattern line is empty and navigate to your theme folder, select it en press the button ‘include recursively’.Behind the value of the scope line click the 3 dots.Select SCSS to open the settings for a newly scss file watcher.Press ‘ctrl + alt + s’ to open options, search for ‘File Watcher’ and press the ‘+’ top right.
We only want files in our theme folder compiled, not in the WooCommerce folder, or any other*. Here is how I did it:Īdded 15 packages from 18 contributors in 0.844s
But I have switched, and now with pleasure I am using PhpStorm to do it for me. In the beginning of working with sccs I used gulp in the commandline to manually run a gulp file, or used screen to have a process running continuesly while using my console for aither things like wp cli.