There is a --style compressed argument for compile minified css (f.e. compiling minified css described here). But is it possible to compile .css AND .min.css at the same time?
Or I should create separate minify file watcher? (I tried to create 2 scss file watcher, one for .css and second for .min.css, but the second one replaced the first one, and I got only minified css).
Possible solutions:
Create 2 files watchers - SCSS->CSS and CSS->MIN.CSS. Use any available CSS uglifier for the second one - YUI Compressor, for example. See https://www.jetbrains.com/help/webstorm/2016.3/minifying-css.html
create a batch script that does the job (calls SCSS compiler for your .scss and then compresses the resultant CSS) and set it up as a file watcher
Use Gulp/Grunt tasks to compile and minify your files. You can either set up Gulp/Grunt as file watchers, or use Gulp/Grunt watch tasks
Related
I'm working on a project that my colleagues are also working on, they're working on it in Atom and they have Atom set up so that it works like this:
There's a folder, css, and in that folder is the main file, custom.scss, which imports all other scss files and is compiled in custom.min.css and custom.min.css.map. There are also subfolders with more scss files. Any time any scss file changes in css or any of its subfolders, custom.scss recompiles, but no other scss file recompiles.
Using WebStorm's SCSS File Watcher, can I do this?
My first attempt was to change the scope in the watcher settings, to just watching custom.scss, and that kinda works, but I have to change custom.scss every time I want it recompiled, instead of it recompiling when I change any of the other scss files as well.
My intuition is that I should have the scope set to watching all scss files in the css directory, recursively, and that I should change the Arguments setting in the file watcher to explicitly say compile custom.scss into custom.min.css but I'm not quite sure how to do that
The key setting here is 'Track only root files' -- when that's not set, it tries to compile all watched scss files as they are saved individually, but when it is set, it only compiles a file if it is NOT marked as an include in another file.
Set the scope to watch changes on all scss files: file:assets/css/*.scss
Click 'Track only root files'
Change the arguments to $FileName$:$FileNameWithoutExtension$.min.css --style compressed so that it minifies
Now, when you save a file included in custom.scss, it recompiles only custom.scss (and other root files) into custom.min.css and custom.min.css.map
I have a file structure as follows:
all_skins
|— 1
|— css
|- _skinVariables.scss
|— file.scss
|— file.css
|— 2
|— css
|- _skinVariables.scss
|— file.scss
|— file.css
|— 3
|— css
|- _skinVariables.scss
|— file.scss
|— file.css
common_css
| _specificCode.scss
| _otherCode.scss
Inside my scss file for each "skin" I'm importing some general scss partials such as _skinsVariables and _specificCode. The _skinVariables partial changes for each skin, and the _specificCode is a general partial reused in all the scss files located outside the all_skins directory.
The problem is that whenever I make a change in the specificCode partial file, I need to recompile manually each scss file to generate the new css with the modified code.
I'm using PhpStorm's file watcher, so any change to the specific scss file triggers the watcher, but a modification to the included _specificCode (or any included partial) doesn't trigger it.
Is there any way to compile all the scss files inside a parent folder? There are over 30 of these numbered sub-folders, so doing it by hand is time consuming.
Any solution using command line, PhpStorm itself, or other software such as grunt will do for me (least desired).
Edit:
The file.scss would be as follows:
#import "skinVariables";
#import "../../../common_css/specificCode"
To be a bit clearer, the problem is that I have the partials included in all my file.scss, to make life easier most of the code comes from the partials.
When I modify a partial that is imported in all the files, such as _specificCode.scss, I would need all the file.scss to be re-compiled, but this doesn't happen.
The way the watchers seem to work at the moment is that they're triggered only when a modification is done to the file.scss itself, not to the partial that is being included.
Any work around this?
So now you have the file watcher set to watch the open files and in case of modification it should compile ONLY the file itself.
What you need is to set your scss transpiler to compile the /all_skins/1/css/file.scss, /all_skins/2/css/file.scss, etc., but I don't know if the ruby transpiler you're using is capable of this setting.
I solved something similar with http://gulpjs.com (Grunt alternative) with Gulpfile.js config like this (altered to your paths):
gulp.task('styles', function() {
return gulp.src([
'all_skins/**/*.scss'
])
.pipe($.sass())
.pipe($.autoprefixer('last 3 version'));
});
Then set a PhpStorm's file watcher to watch whole all_skins and common_css folder (can be set by "scopes") and run gulp task named "styles" and it should work.
I'm taking my first steps in PhpStorm and SASS. I went to File > Settings > File Watcher and I added SCSS
This is my current configuration:
Program: C:\Ruby23\bin\scss.bat
Arguments: --no-cache --update $FileName$:$FileParentDir$\$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths to refresh: $FileParentDir$\$FileNameWithoutExtension$.css
And it's working in the following way. Given the structure:
/mysite
/sass
1.scss
2.scss
3.scss
when I add a SCSS file to /sass it generates .css and .css.map files inside /mysite. However, I want to generate just one CSS file inside /mysite and avoid the map files. How can I do this?
if you have a primary SCSS file that imports other files (partials, their names usually start with underscore), you just need to make sure that 'Track only root files' is enabled in File watcher settings to get the output merged into a single .css
If you don't like .map files being created, pass --sourcemap=none to compiler
I have a folder of SCSS files. The main SCSS file is /css/app.scss. It imports all the other SCSS files, like /css/variables.scss and /css/component_a.scss.
How can I have sass watch my /css/ folder for any changes, then recompile starting from /css/app.scss?
Right now it errors since /css/component_a.scss uses variables defined in a different file. But in app.scss they are imported in the correct order.
My answer may be limited because I don't have all the information about how you are compiling sass and what settings you are using.
However I can see that your file names aren't prefixed with an underscore, basically sass will compile every file individually that doesn't have the '_' prefix.
Basically what you want to do is set up your task manager (grunt, gulp, etc) to watch all files ending with '.scss' then tell it to run the sass compile task and have this pointed at your app.scss file.
With the limited information I have from your question I hope that my answer points you in the right direction to solve your problem.
When using Scout, is there a way to prevent it from compiling every SCSS file? I use one main SCSS file to import all dependency SCSS, thus only need the one CSS file output, as opposed to one CSS for each SCSS.
Files prefixed with an underscore do not get compiled to a CSS file. This is a standard Sass feature. Only the first file listed here will have a corresponding CSS file generated:
i-am-compiled.scss
_i-am-not-compiled.scss
_i-am-also-not-compiled.scss