Type
magento2-module
PostCSS Magento 2 system
magento2-module
MIT
None
None
None
None
None
PostCSS Magento 2 system.
$ npm install -g gulp
(sudo may be needed for mac users)bin/magento setup:upgrade
bin/magento setup:static-content:deploy
npm install
Via Composer
1. composer require
2. bin/magento setup:upgrade
3. bin/magento setup:static-content:deploy
4. Install node_modules with npm install
5. Set up Gulp file paths inside gulpfile.
Added gulp clean and deploy tasks. If there is a need, gulp clean
will remove everything in var/cache
, var/generation
, var/view_preprocessed
& pub/static
folder (Except .htaccess, magento blank & magento luma theme) and gulp deploy
will deploy Magento static content (short of bin/magento setup:static-content:deploy
).
PostCSS plugins used on Strive (check npmjs for usage):
Gulpfile paths cssSrc would be '.../Trive/theme-name/web' and cssDest: '.../Trive/theme-name/'. Child theme will need to have styles.css and settings.css inside the same folder structure like Strive (web/src/preCSS/), so it'll be needed to copy those two files from Trive/blank to child theme.
'postcss-import' by default has file path fallback, so it will look for imported css files inside Trive/theme-name and if it can't find them here, it'll look into Trive/blank. To override existing blank theme css file, add css file with same name and path in child theme. postcss-import will take it instead of Trive/blank css.
File override example: Trive/blank/web/src/preCSS/custom/icons.css -> Trive/theme-name/web/src/preCSS/custom/icons.css
gulp
- Default gulp task (runs 'css', 'static', 'watch' & 'browser-sync' tasks). It watches css, html, images & js files. Browser-sync injects css file into the browser. These files, if changed, are auto transferred from theme to pub/static folder, so deployment of Magento static content would not be needed. At the moment, gulp.watch does not register new files automatically, but it does a great job in tracking modified files. So if the new css/html/image/js file is added, you'll need to stop a gulp task and run it again. (gulp-watch plugin will be probably added in the next release to fix this)
gulp clean
- Removes everything in var/cache
, var/generation
, var/view_preprocessed
& pub/static
folder (Except .htaccess, magento blank & magento luma theme)
gulp deploy
- It's a short of bin/magento setup:static-content:deploy
. There is no problem to use longer option either :)
Working demo of Strive can be checked here: http://strive.jakesharpdev.com/