added SASS filewatcher; Problem adding autoprefixer (all for bootstrap customization)
My goal is to do some bootstrap 4 customization using PHPStorm.
I got the SASS plugin installed and it's working as a filewatcher (I think - haven't really used it yet). At least it LOOKS OK, and no errors in configuring so far.
Following Bootstrap's recommendation, I am wanting to get autoprefixer going also.
I used NPM to get autoprefixer. That seems to have worked.
autoprefixer looks like it's installed. It's here - C:\Users\UU\AppData\Roaming\npm\node_modules\postcss-cli
And below that, in the 'bin' directory, is a file named 'postcss'; the README.md seems to be saying that postcss is the executable name.
So far so good.
What I am not getting is the right stuff to put in the configuration/setup page to make this a file watcher so it can take whatever comes out of the SASS plugin (.css I presume) and fix it up. I can make up a name. I guessed on a few other entries.
I'd really appreciate some help getting the rest of the way here. Tips, suggestions, help - whatever.
Please sign in to leave a comment.
On further reading, I'm even more confused.
I had enabled the Sass plugin, thinking that that would be enough to handle sass.
Maybe not!
Looking at this page - https://www.jetbrains.com/help/phpstorm/2019.3/transpiling-sass-less-and-scss-to-css.html
It seemed to be saying I should have node (I do) and use npm to install sass (globally - though I assume just for this project would also work).
All right. I've done that, fixed the watcher, and it seems to be finding existing sass or scss files and converting them to css.
So far so good. Still not sure how to move ahead with the autoprefixer and still hoping for advising!
>Still not sure how to move ahead with the autoprefixer and still hoping for advising!
You have to install the autoprefixer globally (
npm install postcss-cli autoprefixer -g) and set it up as a file watcher, for example:If it doesn't work for you, you can try using sass-prefix-mixins in your code instead
Thank you Elena Pogorelova! This is very helpful.
Could you please explain '/dist/'? I see it both in the arguments, and in the Output paths to refresh.
I ask this because I do not have a dist folder. Anywhere.
My project structure is like this -
Admittedly, I do not completely understand the significance of the $xxx$ variables (macros perhaps? - whatever you call them) - I assume they are built in somehow to PHPStorm.
With thanks for your help, I have arrived at the following, and most importantly, it seems to be working! I'll show what I mean and appreciate your input or correction of any misimpression.
I just made a tiny edit to custom.scss and noticed the following:
Back to the watcher edit window. If I should change this in some manner, please let me know.
And again, thank you kindly for your suggestion!
>Could you please explain '/dist/'? I see it both in the arguments, and in the Output paths to refresh.
it's just a name of the output directory; you can change it to whatever name you like. I'd also suggest looking at the postcss-cli docs to understand the arguments
>Admittedly, I do not completely understand the significance of the $xxx$ variables (macros perhaps? - whatever you call them) - I assume they are built in somehow to PHPStorm
See https://www.jetbrains.com/help/phpstorm/2020.1/using-file-watchers.html#transpilerBehaviour for information on setting up the file watcher; see also https://www.jetbrains.com/help/phpstorm/2020.1/using-macros-in-the-editor.html