I recently found a way to convert automatically SCSS files to CSS with PyCharm. Today, we will see how to create a file watcher and let it take care of everything.
Compass
Firstly, we need to install compass which will do for us the transpiling.
# For Linux
apt install ruby
gem -v
gem install compass
# For Mac
brew install ruby
# Test if installation ok
gem -v
gem install compass
# if issues, copy these lines to your ~/.bash_profile
export LDFLAGS="-L/usr/local/opt/ruby/lib"
export CPPFLAGS="-I/usr/local/opt/ruby/include"
# and
source ~/.bash_profileFile watcher
Now, let’s create a file watcher which will convert automatically for us SCSS files to CSS files.
Go to Pycharm => Preferences => Tools => File Watchers and click on “+” at the bottom.
# Find compass path for mac
gem list compass -d
/usr/local/lib/ruby/gems/2.7.0/gems/compass-1.0.3/bin
ln -s /usr/local/lib/ruby/gems/2.7.0/gems/compass-1.0.3/bin/compass /usr/local/bin/compassInstall Compass plugin
Go to PyCharm -> Preferences -> Plugins -> Marketplace and then install Compass.
Now, we need to activate the compass support by enabling it from: Preferences -> Stylesheets -> Compass
And now let’s create a watcher by going to Preferences => Tools => File watchers.
I hope it is working well from your side. If you have any questions, feel free to ask in comments.
To know more about me: check my about page.
Sources:
- https://www.jetbrains.com/help/pycharm/transpiling-compass-to-css.html#compassPrerequisites
- https://www.jetbrains.com/help/pycharm/transpiling-compass-to-css.html#compass_compiling_sass_scss
- https://terencelucasyap.com/using-sass-django/
- https://plugins.jetbrains.com/plugin/13705-compass
- https://stackoverflow.com/questions/15806938/how-to-use-compass-in-phpstorm
1+