Can't seem to get SCSS working in Shopify.
My CSS file name 'styles.scss.liquid':
$turquoise: #35d7db;
#toolbar {
width: 100%;
display: inline-block;
background-color: $turquoise;
}
And my HTML in Shopify:
{{ 'styles.scss' | asset_url | stylesheet_tag }}
<div id='toolbar'>
<p>Tools go here</p>
</div>
The color is not showing up, not at all sure what the problem is. Appreciate any advice.
Cheers, DB.
It should be {{ 'styles.scss.css' | asset_url | stylesheet_tag }} You need to add .css too.
Using Liquid in Sass files
When you compile Sass on Shopify servers,
you'll create a style.scss.liquid file. Shopify then compiles the
Liquid first, then the Sass, to create the final CSS file.
Source: A Beginner's Guide to Sass with Shopify — Part 3
Made this work using site.scss.liquid file in the /assets folder and adding it to the theme.liquid file between the head tags: {{ 'site.scss.css' | asset_url | stylesheet_tag }}
Documentation found in https://shopify.github.io/slate/docs/styles-with-liquid
For example, if you were to upload a styles.scss.liquid file, you
could include it in your theme with the following markup:
<link type="text/css" href="{{ 'styles.scss.css' | asset_url }}" rel="stylesheet">
Related
I am building a blog for myself using Jekyll, however, when I open the page in my browser, the SCSS fails to load. I try to navigate to the SCSS file through my browser but to no avail, the browser believes that the SCSS does not exist.
Here is how I add the stylesheet to the HTML:
<link rel="stylesheet" type="style/css" href="/_sass/_base.scss">
I did this to all of my stylesheets, and yet the it doesn't work.
Does anyone know how to fix this problem? Thank you in advance.
You do not link to stylesheets with an href to "/_sass/_base.scss".
Instead you should do the following:
create another directory to hold your "stylesheet", say, css/.
then add an empty stylesheet with an empty front matter block (required)
---
---
// this is an empty stylesheet named "style.scss"
// use #import here to load partials from your _sass folder
import your partial(s) into the above "stylesheet".
---
---
// this is an empty stylesheet named "style.scss"
// use #import here to load partials from your _sass folder
#import "base";
#import "mixins";
link your HTML page with the stylesheet:
<link rel="stylesheet" type="style/css" href="{{ 'css/style.css' | relative_url }}">
...and done!
Takeaways:
Import files from your _sass into a "dedicated stylesheet".
The dedicated stylesheet must contain the front matter block (can be empty).
Link your HTML file with the dedicated stylesheet.
Linked file has a .css extension even if your source file was css/style.scss or css/style.sass
You may hard-code the markup or use a Liquid construct to link the stylesheet.
When using a Liquid construct, prefer using the relative_url filter instead of using {{ 'css/style.css' | prepend: site.baseurl }} or {{ site.baseurl }}/css/style.css
I install Twitter Bootstrap using composer and can easily include the CSS like this:
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet">
However, when I install Font Awesome using composer in the same way, I don't see any CSS files added to that folder. The one CSS file created by Font Awesome is in /app/vendor/components/font-awesome.
How do I include the downloaded Font Awesome CSS into HTML?
Thank you.
Just put the downloaded css file inside public/css/ directory and add following line in your view file.
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
And, Make sure your directory structure should like this:
public/css/font-awesome.min.css
public/fonts/
So that, icon will be displayed properly.
After compiing all my assets through laravel-mix. It displays no error and it went build successful that means all my assets were compiled to the dist/css/ folder.
and I referenced it through
{{ HTML::style('dist/css/auth.css') }}
But i get no display from the view. What's wrong with this ?
Make sure you have HTML package installed via Laravel collective
https://laravelcollective.com/docs/5.3/html
If you did already, try to escape {!! HTML::style('dist/css/auth.css') !!}
Utimately you could go back to the original
<link href="{{ asset("dist/css/auth.css") }}" rel="stylesheet">
Maybe you should try to reference it using relative path:
{{ HTML::style('/dist/css/auth.css') }}
If this doesn't work, try:
<link href="/dist/css/auth.css" rel="stylesheet">
By this, you can determine if the problem was in compiling or HTML package.
I've just installed a Laravel 5 project on XAMPP and my pages are not finding the css files.
This is the link to my css in my public folder:
{{ URL::asset('codepath') }}
{!! ('codepath') !!}
Link to CSS should look like this:
<link rel="stylesheet" href="{{ asset("css/my.css") }}" />
To make it work, my.css file should be placed at laravelProject\public\css\my.css.
If this doesn't work, then you should setup XAMP properly and point web server to a public directory which is inside laravel project root.
Your link to CSS file should be like
<link rel="stylesheet" href="{{ asset("yourcssfile.css") }}" />
OR
<link rel="stylesheet" href="{{ url("yourcssfile.css") }}" />
And your file should be in public directory of your project e.g yourproject/public/yourcssfile.css
That's it!
I am building an Octopress blog and I am implementing an alternative search implementation, lunr-search.
This requires an asset pipeline implementation for Jekyll.
My assets, javascripts and CSSs are compiled and combined correctly, but my images folder is not copied to the public folder.
EDIT with further info:
I have my assets under /source/_assets/javascripts, /source/_assets/stylesheets and /source/_assets/images.
The relevant part in _config.yml:
assets:
dirname: assets
baseurl: /assets/
sources:
- _assets/javascripts
- _assets/jwplayer
- _assets/stylesheets
- _assets/images
compress:
js:
css:
cachebust: hard
gzip: [ text/css, application/javascript ]
My compiled and combined assets are generated as expected under /public/assets, under which I can find the app.js and screen.css, however there is no images folder.
Thanks!!
Have you rewritten your source to use Jekyll-Assets to render image paths? In my experience, Jekyll-Assets needs to know you'll be using an asset before it will copy it to the output directory. It will know when you use a corresponding Liquid tag or filter.
According to the Jekyll-Assets readme, URLs for assets that are neither scripts nor stylesheets may be included with the following Liquid tag:
{% asset_path logo.png %}
Additionally, the following Liquid filter is available:
{{ 'logo.png' | asset_path }}: Returns resulting URL for logo.png
Both examples come from the URL above. So in this case the following two lines would be equivalent:
<img src="{% asset_path logo.png %}" alt="Logo">
<img src="{{ 'logo.png' | asset_path }}" alt="Logo">
If you are indeed already doing this, relevant HTML/Liquid source code may prove helpful.
This did the trick for me
{% img /images/logo.png %}