PhpStorm: SCSS File Watcher - how to disable source maps? - sass

I use SCSS file watcher in PhpStorm 9 and would like to disable source maps generation (.map files). How to configure a watcher for this?

if you've followed jetbrain's tutorial on how to work with sass/scss,
you probably installed ruby-sass (there's also node-sass).
any way phpstorm lets you define arguments when you setup a new watcher (settings->tools->file-watchers).
add the --no-source-map flag and it'll prevent sourcemap generation.

Related

SCSS file watcher cannot open file - WebStorm

I can't get WebStorm's SCSS file watcher to compile the Bootstrap SCSS files.
I have downloaded sass-dart for Windows and have tried pointing WebStorm's file watcher to dart-sass\sass.bat and dart-sass\src\dart.exe
The file watcher is enabled, it's not the common issue I've seen in other questions here where the file watcher keeps disabling itself.
Here is the file watcher setup I am using in WebStorm:
When I use dart-sass\src\dart.exe the result is:
Could not load "bootstrap-grid.scss:bootstrap-grid.css": Unknown scheme (bootstrap-grid.scss) for bootstrap-grid.scss:bootstrap-grid.css
null
and when I use dart-sass\sass.bat the result is:
Error reading bootstrap-grid.scss:bootstrap-grid.css: Cannot open file.
Obviously I'd prefer it to run with no errors and spit out correctly compiled CSS files!
Works fine for me using similar watcher setup. What Working directory: did you specify for your file watcher? Please make sure that it's set to $FileDir$:

PhpStorm: Change SCSS File Watcher predefined settings

In PhpStorm 2016.3.2, if you open a .scss file, a file watcher will be added with default settings:
How can I modify these settings global?
If I start a new project, the file watcher will be added with the new modified settings?
All file watchers are configured on project level, there is no way to modify watchers globally. However you can use export/import functionality to export your watcher settings (see 'Import' and 'Export' buttons in Settings | Tools | File Watchers)
Related feature requests: WEB-8414, WEB-12478.

SCSS On Sublime

I just can't get it work. I have a .scss file with some basic CSS.
Now, I have installed Ruby and I installed SASS like so - gem install sass.
What do I do to get it work on sublime?
I installed "SASS" so sublime acknowledge the .SCSS extension. I also installed SASS builder, and it actually works but in an strange way.
In addition to the compiled css file, it also adds .map file and a folder name .sass-cache.
Why Is that? How to I get rid of that? I don't need a .map file.
I also get an alert every single time the build is done. ("style.css has been compiled")
And not only that but I also get this comment at the end of my compiled CSS file:
/*# sourceMappingURL=style.css.map */
Please help, I'm lost.
Thanks in advance.
The .map file is for chrome (and maybe other browsers) to MAP your CSS that is rendered in the browser back to your actual SCSS. This is very very useful when debugging.
The scss-cache is just what it says it is a cache file that Sass uses. You can delete it but it will keep coming back every time you compile.
Once you go to production you can set Sass to not add any comments to your final css output file. You do this through a config.rb file if you are using compass.
Search on YouTube for LevelUp Tuts and Sass Compass install. Scott expanse how to get stared very well.
--sourcemap=none will disable the comment as well as the .map file creation. not so hard guys.
also, --no-cache will prevent creating the .sass-cache folder and its content.
Thanks anyway.
Try using SassBuilder for ST2. And you can config not to include comments, cache,etc with True/False.
{
"output_path": "../css",
"options": {
"cache": true,
"debug": false,
"line-comments": true,
"line-numbers": true,
"style": "nested"
}
}
For further info, click here.

Make Geany recognize additional file extensions

My default Geany installation on Debian does not recognize some file types out of the box. How can I add extensions, using the same syntax highlighting as other known extensions for simplicity's sake?
In the current case, I'd like Geany to open all .aspx files with the same highlighting as .html files.
Use inside the menu Tools->Configuration files->filetype_extensions.conf. This will allow you to configure the filetypes based on suffix for your user.
Just add new extensions in /usr/local/share/geany/filetype_extensions.conf
I had trouble accomplishing this without help from here.
Go here to read documentation about this topic.
From the Geany menu, go to:
Tools > Configuration Files > filetype_extensions.conf
Go to this line and un-comment it:
#~ [Extensions]
So that it just reads:
[Extensions]
I was needing to add .mjs as an additional extension for javascript. So, for me, I also uncommented this line:
#~ Javascript=*.js;
And changed it to:
Javascript=*.js;*.mjs;
After this, I saved the file.
Now when I opened files having a .mjs file extension, they automatically have Javascript Syntax Highlighting.
I made some suggestions to improve this expeirience here.

How to Minify CSS with SCSS File Watcher in PHPStorm IDE

Is there a way to configure SASS FileWatcher so it builds a Minified CSS?
I currently configured SASS + YUI Compressor to accomplish this but I would like to do this with pure SASS if possible.
Here are the screenshots of both configurations:
SASS
YUI Compressor CSS
Thanks in advance.
Probably the fastest way to achieve this is to use the compressed option, mentioned in the previous comments, as an argument. The quickest way to configure this in PHPStorm is as follows:
Go to File > Settings
Inside Project Settings select File Watchers
You should already have an SCSS watcher created here (if you have the SCSS watch plugin enabled, PHPStorm prompts you to create a watcher when opening a new .scss file.) Otherwise, enable it (more info about that in this section of the official documentation,) and then create the new watcher pressing the "+" symbol.
Double click the watcher name to access its configuration.
In the Arguments line make sure to add the --style compressed argument
Click OK and you're done
This image shows how that configuration should look:
From that point on, your .css output files will be compressed.
The correct answer is --style=compressed
menu File -> Settings -> Tools - File watchers
add scss and in argument add --style=compressed
If you are using sassc under Linux (Arch) you could use as Arguments:
-t compressed -m auto $FileNameWithoutExtension$.scss $FileNameWithoutExtension$.min.css
For me, --style compressed, --style compressed and --style=compressed don't work.
I had to add the option -x as an argument.
Like here:
If you want more details this post the following post is where I found this solution: https://stackoverflow.com/a/25579991/9861577.

Resources