In a view, I'm able to use the following code to get the versioned asset URL. How can I achieve this inside of a Sass stylesheet file? I'm effectively looking for the equivalent of Rails' image-url but can't seem to find the same function for the Play Framework (version 2.5).
#routes.Assets.versioned("images/favicon.png")
Related
Preface: I can't use webpack. It breaks too much of my AWS stuff and I'm too frustrated finding ever more problems. I wish I could use the convenience of webpack but I stopped using it and AWS now works. Now its all watchify and babel.
Can I use CSS/Sass without using Webpack (as mentioned) or import CSS Modules, PostCSS etc?
Issue: I can link a css file, pass in the classes to my component and it all renders out proper div / class syntax, but (I assume) the virtual DOM just doesnt load it. How can I get around this?
[Edited as I got a down-vote, just to be safe.]
You can just run gulp, and gulp-sass. That compiles a .css file and you can just manually include that file in the <head> of your file. Try there are dozens of tutorials on Google like this one
So,
I have used bower to install bootstrap SASS files into my application.
I am using AngularJS and want to use my own directory structure instead of the default Content path defined by MVC.
So I have installed https://github.com/twbs/bootstrap-sass and in my core SASS file I have imported the bootstrap SASS like this:
#import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
everything loads in my application and the site is definitely using bootstrap, but whenever I try to use a glyphicon I just get a square instead of the icon. Looking in the console I can see that the path to the glyphicons is wrong. It is showing:
http://localhost:58859/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
but it should be
http://localhost:58859/assets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
Now I "could" edit the variables file and change this line:
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
to something like this:
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: "/assets/bootstrap-sass/assets/fonts";
but whenever someone loads my project from github and bower resolves bootstrap my changes to that file will be lost. I have noted in their documentation they talk about sprockets and mincer, but I have never used these so I have no idea what they are for.
My question is, can I change the font path without editing the SASS file directly?
As stated by Rob Dodson, style tags are now unavoidable with Web Components. I am trying to find a way to use LESS with this new tecnhology without having to paste the compiled CSS in my HTML document everytime I change something in the LESS file . Is there anyway to achieve that?
I am using Polymer.
Thanks!
Laurent
You can make the client compile the LESS to CSS , you should definitely take a look at this :
http://lesscss.org/#client-side-usage
It is advised to compile it yourself to css in a production environment though !
Doing this client-side hardly seems like the corrent solution, especially at scale. For instance, do you really want 1000 web components in your app all including LessCSS and compiling on the client side?
Just compile server-side and include the compiled version in your html import. Apps like DocPad, make this a lot easier. For instance:
src/documents/components/my-component/my-component.css.less is your source file, and is compiled to out/components/my-component/my-component.css, which is accessible at /compoennt/my-component/my-component.css.
We use this workflow to also make use of javascript pre-processors like coffeescript, as well as post-processors like css auto prefixer, and bundlers like Browserify. See: https://stackoverflow.com/a/23050527/130638 for more info.
Simply compile your less and embed the generated CSS file via good old link tag.
I don't think that rob wanted to say that using style tags is the only way to go. You can still link to external stylesheets as you always did.
Why don´t you compile on server side using php compiler? Have a look here - http://leafo.net/lessphp/ -
To let you know, i´m using this compiler on my projects, on the server side without any kind of problems!!!!!!! :) IMO, it´s better to have the compilation work on the server side. I´m not totally 100% sure, but i think IE8 don´t recognize text/less
The way I have done this before is have individual .less or .scss file for each component and have it compile into the individual .css file which is then called into the respective component file. and finally vulcanize everything into a single file.
Incase you want to use a single CSS file, then use //deep// combinator or ::shadow pseudo elements in the CSS.
If you able to create the custom elements without using ShadowDOM then you can simply have all your less merge into a single CSS.
Honestly speaking I was unable to create a wc without shadowDOM in polymer. There is a long conversation on github on enabling / disabling and hacking a way to create a wc without shadowDOM here https://github.com/Polymer/polymer/issues/222
One solution would be to have the preprocessor translate .less files into .css and then linking them inside Polymer components, like explained in the official documentation: https://www.polymer-project.org/1.0/docs/devguide/styling#external-stylesheets
Unfortunately this is deprecated. So the other way to go could be to have another step that wraps the preprocessor-generated css files with a dom-module: this way you can follow the Polymer way including the style module inside your components, or using the css file compiled from less if you do things outside Polymer components.
I'm using Gulp for my build process and I found this module very useful:
https://github.com/MaKleSoft/gulp-style-modules
It creates, for every .less file I have in my sources, an .html file with a dom-module wrapped around it, ready to be included in the components' styles.
I'm using rails with compass.
When using rails without compass, rails has a css per each controller, which contains things that are only relevant to the views in that controller.
I couldn't get the same behavior with compass, which resulted in having a big monolithic file instead of separate files per controller.
What is the recommended approach to solving that problem?
Rails (since 3.1) does create a css file per controller but it's only for practical code separation, all code assets get compiled into one master file per format (.css, .js..), and this is the best practice 90% of the time.
If you want to use this approach with SCSS or SASS code, just change the file extension to .css.scss or .css.sass (ie: mycontroller.css.scss)
If you want to separate the compiled files per controller (you probably don't need it, so i'd advise that you understand the asset pipeline before doing it), you'll have to implement the custom behavior yourself. take a look here http://guides.rubyonrails.org/asset_pipeline.html
The LESS docs here
http://lesscss.org/#usage
say: "Make sure you include your stylesheets before the script."
However, BlogEngine.net seems to make that impossible by rewriting all the links to *.js file and putting them before the style sheets.
I've tried everything I can think of including putting the files in a subdirectory and using a relative path. I'm very hesitant to mess with the BlogEngine.Net code.
Is there any way to get LESS to work with CSS in BlogEngine.Net? Any way to force the engine to allow me to order the Javascript entry after the *.less reference?
Perhaps you could use the Tracking Script or the "Add custom code to the HTML head section" fields (you can find them in Admin -> Settings -> Custom code).
From what I can see in the code, these fields are rendered in the HEAD section after the stylesheets.
Is there any way to get LESS to work with CSS in BlogEngine.Net?
If you are willing to consider a different approach than using the client side less parser than I recommend trying the design time less parser in either Visual Studio 2012.2 or The Web Essentials Extension in Prior releases of Visual Studio 2012. It allows you to write your less file and have it compiled to css and minified css every time you save. Then you can just reference the output min.css file in your theme.