In the scss of RefineryCMS gem, they are targeting an image for background like this:
body {
min-height: 100%;
margin: 0;
padding: 0;
font-size: 10px;
font-family: Verdana;
line-height: 1.5em;
background: #303030 image_url('refinery/page_bg.png') repeat;
}
And when is compiled, it will be like this:
background: #303030 image_url('refinery/page_bg.png') repeat;
But, page_bg.png is in the assets folder: assets/refinery/page_bg.png
If I try www.mydomain.com/assets/refinery/page_bg.png I can see the image
So, image_url('refinery/page_bg.png') in the compiled scss is missing the prefix assets/
How can I fix this?
I tried to create a folder in public folder named refinery and put page_bg.png inside it, but, I didn't work, and www.mydomain.com/refinery/page_bg.png won't show the image .
Is there a solution for this? any one can help? fixing the assets prefix is of course better, but, I don't mind using the public folder directly ..
The asset-pipeline config defines some directories as asset directories . This means the reference to the content in asset directories is without assets in front. For example , in most default configs the asset directories are : app/assets , lib/assets and vendor/assets . You can place your .png background image in each of their subfolders with the name image and refer to it just like this : background: url(your_image.png) .
EDIT : According to this discussion, if deploying to Hiroku , there should be sass-rails included in the process of assets precompilation .
Related
Noob to Gatsby and SCSS I wanted to dive into both and learn them beginning of the new year. After following the Gatsby tutorial I wanted to dive in and build a site based off the gatsby-starter.
Followed the documentation for install & config for SASS.
In src created a directory named fonts and added Open Sans:
src/fonts/OpenSans-Regular.ttf
src/fonts/OpenSans-Bold.ttf
src/fonts/OpenSans-Italic.ttf
created a directory in src for SCSS called main.scss and created a partial directory to bring in typography:
src/styles/main.scss
src/styles/partials/_typography.scss
main.scss:
#import 'partials/typography';
body {
font-family: $font-primary;
}
_typography.scss:
$font-primary: 'Open Sans', sans-serif;
// Body Font:
#font-face {
font-family: $font-primary;
font-style: normal;
font-weight: normal;
src: url('../../fonts/OpenSans-Regular.ttf') format('truetype');
}
In index.js I bring in the SCSS with no issues:
import React from 'react'
import '../styles/main.scss'
const Home = () => {
return <div>Hello world!</div>
}
export default Home
but in the terminal I get font errors for each font:
Can't resolve '../../fonts/OpenSans-Regular.ttf' in '/path/to/project/src/styles'
If you're trying to use a package make sure that '../../fonts/OpenSans-Regular.ttf' is installed. If you're trying to use a local file make sure that the path is correct.
error Generating development JavaScript bundle failed
Per research I dont see an answer and I've read:
global scss in Gatsby
Using Local Fonts
gatsby-config.js:
module.exports = {
plugins: [`gatsby-plugin-sass`],
}
Why am I getting an error when trying to bring in local fonts for this site? Also, I'm bringing in the local font because I read in the documentation there is an offline ability.
Edit:
Forked Gatsby with the Hello World Starter:
The mindset and your approach is perfectly valid and the issue relies on the relativity of the paths in your _typography.scss. Use something like this:
$font-primary: 'Open Sans', sans-serif;
// Body Font:
#font-face {
font-family: $font-primary;
font-style: normal;
font-weight: normal;
src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
}
Notice the error prompted:
Can't resolve '../../fonts/OpenSans-Regular.ttf' in
'/path/to/project/src/styles'
/path/to/project/src/styles it's weird, it seems that you have something hardcoded somewhere because of the /path/to/project/ part. Give it a look too.
The issue relies on your path, which is relative to the main.scss file, not to the partial since, in the end, the partial belongs to the main.scss file because you are importing it directly.
I am currently using Sass in my ExpressJS code and have been able to generate a css file using the following command -
postcss main.css -u autoprefixer -d dist/
The css file BEFORE using autoprefixer has the following code :
.container {
display: grid;
grid-template-columns: 2px 2px;
}
The css file AFTER using autoprefixer has the following code + some commented sourceMappingURL:
.container {
display: grid;
grid-template-columns: 2px 2px;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL21haW4uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsYUFBYTtFQUNiLDhCQUE4QjtBQUNoQyIsImZpbGUiOiJtYWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5jb250YWluZXIge1xuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDJweCAycHg7XG59XG4iXX0= */
The expected css output (as per autoprefixer.github.io) should be :
.container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 2px 2px;
grid-template-columns: 2px 2px;
}
My confusion is two-part.
Have I messed up the autoprefixer command in anyway? Do I need to correct it somehow to get the expected output?
Am I lacking knowledge about how the current output file works ie.,
(a) Is the generated css file using the autoprefixer command enough?
(b) Do I need to do something with the sourceMappingURL to get the desired output?
Hope I have explained my question clearly enough.
Thanks in advance!
At autoprefixer.github.io there is Browserlist setting below textareas saying "last 4 version". This tells Autoprefixer to add prefixes for older browsers. Most probably you don't have .browserslistrc in the root of your project or a browserslist key in your package.json that would tell autoprefixer which browsers are you targeting, so it takes defaults. browserl.ist would help to visualize that (please compare defaults with last 4 version to see the difference in coverage).
Create browserslist in the root of your project and explicitly indicate the baseline of browsers you are targeting. Here you will find examples on how to construct your queries. Don't worry about source maps - there's nothing you have to do on that side.
Note: Prior to prefix Grid for IE11 (if that's your case), I encourage you to get aquatinted with CSS Grid in IE: CSS Grid and the New Autoprefixer
I have a problem with using #use rule to bring partials into the main scss file. The current setting I have:
- using node.js installed on my local computer,
- chocolatey,
- dart sass v 1.25.0.
This is the file structure that I have:
file structure
The issue
I'm using #use to bring all partials into core.scss. I've written some basic mixins in mixins/main.scss, like the example below:
#mixin font-use {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1rem !important;
font-weight: normal;
line-height: 1.4 !important;
}
When I'm calling the mixin font-use into _structure.scss and save, it returns an undefined mixin error.
I've searched on the internet to see if there is a problem with #use since is fairly new or I'm doing something wrong.
PS: if I change #use rule with #import, there are no errors after the compilation is done.
I have a laravel project where I am using single view components. I have a global.scss file where I have code below to include my fonts which are placed in public/fonts folder. In the style section of each vue component , I am using #import '../../css/global.scss'; to import the global.scss file but the fonts still dont seem to be usable. Am I doing anything wrong with this setup?
#font-face {
font-family: 'Testing-Font';
src: url('/public/fonts/Avenir-Black.tff');
}
#font-face {
font-family: 'Avenir-Light';
src: url('/public/fonts/Avenir-Light.tff');
}
#font-face {
font-family: 'Test-Fontname';
src: url('/public/fonts/Avenir-Book.tff');
}
assuming public is the director from which the web page is served, you should probably omit it from the font files paths:
#font-face {
font-family: 'Testing-Font';
src: url('/fonts/Avenir-Black.tff');
}
#font-face {
font-family: 'Avenir-Light';
src: url('/fonts/Avenir-Light.tff');
}
#font-face {
font-family: 'Test-Fontname';
src: url('/fonts/Avenir-Book.tff');
}
to see if something went wrong with the loading process, open the network tab of your favored browser's dev-tools, and look for 40x errors.
if the issue persist (and stems from 404 errors), try and use a relative path for the font files, to avoid any unknowns when your build system resolves the root path (/).
also, depending on the use case (library/application) i would include it in the entrypoint file, so any component could use it.
Either your font files have wrong extension or you just typed extension wrong in CSS. It should be ttf, not tff.
config rb is running default values.
the folder structure is also the default one.
in my scss file i do.
#import "icons/*.png";
#mixin sprite_css($name) {
#include icons-sprite($name);
height: icons-sprite-height($name);
width: icons-sprite-width($name);
display:block;
}
.btn {#include sprite_css(deltag);} //deltag is the name of a png image in the sprite.
Prior to this i made a folder under the images folder, called icons
here i put all my png files in.
The generated css code looks like this.
.icons-sprite, .icons-deltag, .icons-deltag_grey, .icons-deltag_mouseover, .icons-facebook_del, .icons-faneblad, .icons-soegefelt, #container .btn, #container .btn_over {
background: url('/images/icons-s93e62b2fff.png') no-repeat;
}`
notice the background path is set without the trailing dots infront of images folder, so my CSSfile that is placed in the stylesheets folder is now looking for an image folder inside the stylesheets folder, so obviously the files are not loaded. I cant seem to change this anyway. changing config rb to relative_assets = true is not working.
I want the css file to point the sprint to.
background: url('../images/icons-s93e62b2fff.png') no-repeat;
that is the correct path, how can i achieve this?
The Compass config.rb file is loaded each time you run a Compass command. If you are running compass watch you must exit the process and then start it again in order to reload changes to the config.rb file.