Adapted from https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/css_debug.html
– Install nodejs somewhere
apt-get install node
– cd (magento root)
– move ./package.json.sample to just package.json
– move Gruntfile.js.sample to Gruntfile.js
– install grunt, probably as root
npm install -g grunt-cli
– update Magento’s node dependencies
npm install
– make sure your style sheet is added to (your theme)/Magento_Theme/layout/default_head_blocks.xml
– make sure your source files exist
[dev@/var/www/ecommsys/app/design/frontend/Siliconrockstar/base][22s] tree ./web/
./web/
└── css
├── source
├── styles.less
└── _variables.less
– add your theme to ./dev/tools/grunt/configs/themes.js
///////////
base: {
area: 'frontend',
name: 'Siliconrockstar/base',
locale: 'en_US',
files: [
'css/styles-m',
'css/styles-l',
'css/some-customer-stylesheet'
],
dsl: 'less'
}
– run the grunt task to prep the symlinks for your static content files
grunt --verbose exec
– have grunt compile your less
grunt --verbose less
As far as I can tell, you either need to
– compile the both your themes’ css and all parent themes’ css, or
– add the stylesheets for the parent theme ( usually styles-m and styles-l ) to the grunt config for your own theme
…to make sure changes show.
BONUS:
If you just need to add some simple simple css changes, you can toss them into _extend.less and they’ll automatically compile and append to the parent themes’s styles. Not sure if you need to add the grunt config or not…
[dev@/var/www/ecs/app/design/frontend/Siliconrockstar/base/web][0s] tree ./css/
./css/
└── source
└── _extend.less