There seem to be a few plugins...and I'm using webstorm file watcher which also precompiles individual files.
I think this may not be the best way to setup a watcher.
I'm running this command now:
sass --no-cache --update --stop-on-error --trace ./app/sass:./app/css
It seems to conflict with the webstorm file watch, which appears to be appending everything to base.css. Can someone tell me what exactly this command is doing vs. a sass filewatcher in webstorm?
What's the best way to work with sass:
precompile my sass to css using a grunt build task
and have file watchers while developing?
My base.sass looks like this:
#charset "UTF-8";
/* DO NOT EDIT FILES IN ./css. See ./sass instead */
#import "page";
#import "modal";
#import "nav";
#import "tables";
#import "forms";
#import "message";
Your command just compiles all files in diretory ./app/sass to CSS and put the resultant files to ./app/css. Default file watcher runs the following command:
sass --no-cache --update $FileName$:$FileNameWithoutExtension$.css
i.e. it takes the current file (the one that has been changed) as input and creates a .css in the same directory. But, as you have 'track only root files' option on (default settings), the watcher creates css for the root file only - the one that reference other files via imports. You can turn this option off to change the current behavior ans get css generated for other files as well.
Related
I have two scss files in a folder scss which will be included into a primary app.scss file. All of these are transpiled to corresponding css files in /css folder:
scss/global/swatches.scss:
$swatch-bg: rgba(30,30,45,1);
scss/global/panels.scss
.panel {
background-color: $swatch-bg;
}
And then they are both included in my app.scss file:
scss/app.scss:
#import 'global/swatches.scss';
#import 'global/panels.scss';
and then I run:
sass --watch scss:css
This correctly creates all expected files inthe css/folder.
However, if I now modify panels.scss which contains a reference to a variable (imported in app.scss) the watcher complains it can't find the variable. But if I edit and save app.scss after, it will correctly compile and the variable is correctly parsed too.
So it seems, if I edit app.scss, any variables defined in any of the imported files will be available to subsequent imported files when sass is compiling. But this is only true when editing app.scss.
How can I get it to compile correctly without having to add the same imports to each file? Is what I am trying to do even possible?
I managed to resolve this by using partials instead in the following manner:
Firstly, rename all my imports to include a prefix, for example:
global/_swatches.scss
and then in my main file (app.scss) import is as follows:
#import 'global/swatches';
Notice the lack of the underscore and .scss file extension
Novice web dev here getting set up with SASS for the first time. Currently using Grunt to compile my css from a main SASS file.
So I have three files:
//main.css
/*some css*/
//main.scss
#import 'header';
//_header.scss
/* some sass */
When I edit and save the _header.scss file, I also have to save the main.scss file. Only then will gulp compile changes in the main.css file.
Is there a way to "autosave" every file that contains an import of a partial?
Based on what your providing I am thinking it has something to do with your main.css stuff at the top of your file. I am assuming that you have actual css below that comment in the real file?
Best practice is to #import everything at the top of the file before you do anything else.
If that is exactly what you have in the real file then it might be with how your running grunt.. Would you be able to provide your grunt config file please?
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 mixins file, which I constantly develop. I use it in every project, but sometimes I need to go back and I not always remember to copy the new file, so it causes confusion (plus, it's really counterproductive, having to copy a single file to each project).
What I thought today, that it would be great if I could import a scss file either from remote hos (a dropbox url) or an absolute path. I tried using this:
#import 'F:/XAMPP/htdocs/RATIUG/ratiug/reset';
and
#import 'http://myDropboxLink';
but neither worked. Can I solve this somehow?
When Sass encounters #import with a protocol, it assumed that is a CSS directive. So, you have to precise a shared folder.
Solution with Sass
If you uses Sass in standalone mode, you can add the --load-path argument to precise the shared folder:
$ sass --load-path F:/XAMPP/htdocs/RATIUG styles.scss
Now, you can call your reset mixin:
#import "ratiug/reset";
Solution with Compass
Simply add the shared path in your config.rb with add_import_path:
sass_dir = "sass"
css_dir = "css"
add_import_path File.expand_path("F:/XAMPP/htdocs/RATIUG")
I wanted today to try scss support of yeoman.
I followed the procedure :
$ yo angular
include Twitter Bootstrap? Yes
use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? Yes
$ grunt server
And then the default view load but without style formatting. In the console I can see that it cannot find /styles/main.css file.
I have seen that compass put the file in .tmp/styles/main.css, so I tried to change it in index.html. But the same. Moreover there is no .tmp directory in my project folder.
So I ran "grunt build" and loaded the index.html in dist directory in a MAMP server. Same, no css formatting, moreover no error in the console
You shouldn't be putting the '.tmp' path anywhere in your index.html, it should be left pointing to 'styles/main.css' like so:
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
You should also have your actual style file at 'app/styles/main.scss', which Yeoman should have created for you. When you run 'grunt server' it uses compass to compile all the scss files into a single css file which it temporarily puts under '.tmp', but as long as your scss files are in place you should not need to worry about this. My guess would be that you've somehow deleted or renamed the main.scss file; you should not be renaming this to 'main.css' for example.
I had the same issue, your main.scss file has issues with bootstrap css
I deleted the line ( 2. line )
#import 'bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';
and have no more issues. it compiles to main.css