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.
Related
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$:
I have a file using scss with css-modules like so:
import styles from './Login.scss';
The webpack build works fine but i'm getting a flow error: Required Module Not Found
In my .flowconfig I have
[ignore]
.*/node_modules/fbjs/.*
.*/app/main.js
.*/app/dist/.*
.*/release/.*
.*/git/.*
[include]
[libs]
[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
esproposal.export_star_as=enable
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='styl' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='png' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
I've also seen https://github.com/facebook/flow/issues/338 but it doesn't really have any solution.
Has anyone found a workaround for this issue?
A better solution for this error is to use the css-modules-flow-types webpack plugin to generate flow types for your CSS modules.
Flow doesn't know about the scss extension, so you need to add the following to your .flowconfig, in the [options] section:
; Extensions
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss
You should also add *.scss.flow to your .gitignore. These files shouldn't be checked in because they are automatically generated during the webpack build.
added all the file types I wanted flow to recognize in .flowconfig file
[options]
module.file_ext=.js
module.file_ext=.json
module.file_ext=.jsx
module.file_ext=.css
module.file_ext=.scss
This error can be fixed by assigning .scss files to an empty module. I just npm installed empty and added this to the .flowconfig :
module.name_mapper.extension='scss' -> 'empty/object'
We can use module.name_mapper.extension to replace types for imported module on Object
module.name_mapper.extension - Specify a file extension to match, and a replacement module name,
separated by a ->.
add option to .flowconfig file
// .flowconfig
[options]
module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flowconfig.mock-module.js'
create new file
// flowconfig.mock-module.js
export default Object;
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.
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.
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.