I am trying to use a Dart package which contains only a single resource: a minified CSS asset: https://github.com/agilord/bulma_min.
The documentation just says I should put this package in my pubspec.yaml and everything will just work... but nothing works.
I guess I need to make the web_compilers build dependency minify my own CSS together with the CSS from this package, but I have not found documentation anywhere explaining how to do this.
I've tried using saas_builder but it does not seem to work with Dart 2.1... I've created an issue but nobody bothered to reply so far.
Can anyone tell me what is going on and how I can get this working?
After struggling for a while, I found an example project using dart_bulma_sass: https://github.com/indiealexh/dart_bulma_sass_example.
Even though it currently uses an old version which does not work with Dart 2.1, upgrading the dependencies makes it work!
Basically, my pubspec.yaml file just needed these dev deps:
dev_dependencies:
build_runner: ^1.1.2
bulma_sass: '>=0.7.1'
sass_builder: ^2.1.2
build_web_compilers: ^1.0.0
After that, added this to web/main.scss:
#import "package:bulma_sass/scss/bulma";
And linked to the generated css in the web/index.html file:
<link rel="stylesheet" href="main.css">
I'm currently using Web Essentials 2013 update 4 to provide support for compiling .scss files in Visual Studio.
The tool has worked fine for me in the past however I have just created a new .scss file and have copied the bootstrap un-minified css into this new file.
Upon saving, the compilation window on the right hand side of the screen fails to update or display the compiled css or any error messages. Meanwhile, the blue bar at the bottom of my Visual Studio screen is stuck on
Compiling 0 dependent file for bootstrap.scss
Usually I would expect a bootstrap.css file to be generated from this as well as a bootstrap.min.css file but this is not happening.
Does anyone have any ideas how I can restore this back to normal working conditions?
This was to do with the settings I had in my WebEssentials-Settings.json file. In version 3, the 'UseRubyRuntime' parameter needed to be marked as true to allow it to auto compile into the relevant files. Since version 4 this can be marked as false as WE now has a built in compiler which I believe may have been conflicting with the RubyRuntime version I was trying to use.
I had a similar problem, after installing Web Essentials 2013 Update 4 the .scss files started throwing errors like this to the output:
Something went wrong reaching: ...
SCSS: Site.scss compilation failed: The service failed to respond to this request
Possible cause: Syntax Error!
The only solution for me was this:
Uninstall Web Essentials
Delete %AppData%\Local\Microsoft\VisualStudio\12.0
Delete %AppData%\Roaming\Microsoft\VisualStudio\12.0
Repair VS 2013.4
Reinstall Web Essentials
Source: https://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361/view/Discussions/1#15143
And a heads-up: If you import other .scss files, make sure they are in the correct location. When I updated Twitter.Bootstrap.Sass 3.3.3 via NuGet, the related .scss files were moved to a different folder and I had to update references. For example:
Before:
#import "../sass/bootstrap/_utilities.scss";
After:
#import "../stylesheets/bootstrap/_utilities.scss";
I had the same problem, and spent some time uninstalling and re-installing Web Essentials. I tried deleting the parts of AppData that seemed to be related to Web Essential, all with no success at compiling the scss file.
So I created a new .scss with minimal content, that compiled. Then I started copying over pieces from the failing one. After a couple of copies, the new one failed too. I was able to zero in on the failure.
It was caused by this line:
$highlightcolor: #67a0f;
Do you see the problem? the hex color code is missing a digit. it should have been 67a0f5. Fixing this fixed the problem with the original file.
I had gone over the file looking for syntax errors, but didn't spot the short color def.
I hope this saves someone some time and frustration.
I had the same problem; in order to help diagnose it I created a minimal .scss file with dummy CSS rules - it generated the same error.
Then I went to my long-time tested and fully working legacy .scss file - it generated the same error. Something is wrong here, I thought.
After tinkering with the issue for a while, somehow it got fixed by closing Visual Studio, reloading and reopening the solution.
Referencing the changelog, as of 2.5 for update 4 of Web Essentials:
Removed all node.js based tools â—¦Sass/LESS compilers
JSHint/JSCS
linters CSS AutoPrefixer Handlebars compiler SweetJS/LiveScript
compilers
http://vswebessentials.com/changelog
So my understanding is, that it no longer compiles.
I am having the same problem and have eliminated actual syntax errors and incorrect path references. I have found two things out about this.
This happens when there is a file that only specifies variables and
has no actual scss or css markup. This is more of a hack as you
may have to put unwanted css in a variables file.
Turning off Autoprefixer will resolve the issue entirely, but at the cost of not using this feature.
I had this problem and determined that when I was running a Compile All SASS Files, the plugin was trying to compile files found in the /obj directory of the project which failed, and consequently caused subsequent compilation to fail. Deleting the /obj directory and restarting VS fixed the issue.
I had a similar issue and turn out to be a reference to a SASS variable before it was declared. There were no warnings or errors. Once I move the reference to the right place it all worked fine.
Going off of what others have said about Web Essentials. Looking at the change log, it states that for versions 2013 update 4 and up (meaning version 2015 as well),
Important! Bundling, minification and compilation of LESS, Sass and
CoffeeScript is not longer part of Web Essentials 2015. Install the
new extensions Bundler & Minifier and Web Compiler instead. Also, see
this list of other web development extensions that might be of
interest to you.
I found this neat little extension for visual studio, that compiles the SCSS file(s) on save into a CSS file (along with minification for that file).
You can get it here.
The guy that created this extension also talks about the Web Essential issue as well, found here.
Compass appends a unique ID to my sprites everytime a new image appears in the Compass images folder. Is the same behavior available with the CSS files ? So my CSS file is named mystyle-12343321.css instead of mystyle.css
Thanks !
As detailed by Scott Davis (Compass core team dev), in this Compass Github Issue (opened by myself) :
It's not a cache buster in the sense of the web it's a uniqueness hash. It's how compass tracks changes to the sprite file so that we know if it needs to be recompiled
So the answer is no, as Compass does not support cache busting.
Anyone doing development with meteor and SCSS. How do you get started, there are no packages for meteorite that i could find that compile .scss files into a specific folder?
Have you tried just compiling the sass/scss into css locally during development? Meteor shouldn't complain if you have your config.rb inside of the client folder along with a sass folder and compiled css folder. It should just automatically read the css per norm. Running $ compass watch inside of this client folder where the config.rb resides is an easy way to automate this css compilation. Telescope is a great sample Meteor app that uses sass in this fashion.
--Alex
Just to get this posted as an answer (was posted as comment); bookcasey posted this sample project as well: https://github.com/gdumitrescu/scoreboard which provides some guidance on how to use sass/scss. Hope it helps.
The new rails 3.1 asset pipeline confused me a lot. In rails 3.0.x, with the sass gem, my global css file got updated when I edit .scss files. But in rails 3.1, that doesn't work anymore. It seems like I have to run a rake task to update my css files whenever I modify the .scss files. I feel like I misunderstand something about the new asset pipeline, but I don't know what it is. Can someone provide a solution or explanation to this problem? Thank you.
There are two possible causes of this. I am assuming that you are in development mode, and that all the gems are loaded.
1. Config
In development mode files are compiled on-demand and cached until any changes are made. You have to get the new 3.1 config options set in the right files or this might not work as expected.
Check out the Rails guides section on upgrading.
2. Extensions
The other is getting the extensions in the right order. For scss that would be file.css.scss. This tells Sprockets to parse the files as scss first, and that the have a css extension. If you had .erb on the end - file.css.scss.erb - then erb is processed first, then scss.
Upgrading apps is a bit tricky because so many things have changed. The asset pipeline guide has lots of useful information and advice.
Sass / SCSS has this built in already so you don't have to do ERB pre-processing.
image-url("image.png")
http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
For me this problem resolved very easy.
I simple deleted all precompiled *.css files from assets/stylesheets and remain all *.scss files. Rails worked fine with *.scss directly, withoutn precompile.