I want to use #import in my scss file. It was working okay, but now I do #import "vars"; (I have _vars.scss file in the same dir) and Prepros returns error saying such file doesn't exists. What is wrong?
style.scss:
body {
background: white
}
#import "vars";
_vars.scss:
$grey: #777;
$violet: #490a3d;
$text: #414141;
$separator: #d6d8d8;
$title: #0d0d0d;
$white: #fff;
I solved it. Problem was with Prepros (too bad, it's a great piece of software). It turned out,my directory name was the cause of all this. It was named [projects], since I keep there all my "temp" stuff. I moved the files to other directory and it works great.
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'm a bit newer to sass, but when I was learning it the Sass website said to start using #use instead of import, so after a lot of trial and error I finally figured out how to use it pretty much the same as import.
Note: I'm using Prepros for compiling.
I have this mixin in it's own file inside of a mixins folder:
// scss/mixins/_flex.scss
#mixin flex($flex-flow: row, $justify-content: center, $align-items: center) {
display: flex;
justify-content: $justify-content;
align-items: $align-items;
flex-flow: $flex-flow;
}
I tried #useing it in my main _mixins.scss file:
// scss/_mixins.scss
#use "mixins/flex" as *;
Then I tried using it in another one of my files containing common elements:
// scss/_common_elements.scss
#use "mixins" as *;
.flex {
#include flex();
}
Then I receive the error inside of Prepros log: Undefined Mixin where I call the #include flex(); line (inside of _common_elements.scss)
It was working until I decided to put the mixins in their own separate folder, but this is the same as how it's setup inside of Bootstraps source code.
This whole process of using #use has been really confusing.
Does anyone know why I might be getting this error?
I managed to fix it!
ALSO: If you can help me edit this question / answer to better explain it with proper language, please post suggestions and I'll update it.
In the _mixins.scss file I needed to use #forward "mixins/flex" instead of #use "mixins/flex" as *;:
Like this:
// scss/_mixins.scss
#forward "mixins/flex";
#forward "mixins/overlay";
#forward "mixins/etc...";
I wish they would've made this something more clear on the actual sass #use documentation.
Here are the actual docs to #forward.
to use #use command and other new features of sass, you need to install dart sass, and not node-sass;
https://www.npmjs.com/package/sass
I'm using SASS sprites: http://compass-style.org/help/tutorials/spriting/
'channel' is the folder name in 'images' that contains my images to be sprited. The following does create an image sprite:
#import "compass/utilities/sprites";
#import "channel/*.png";
#include all-channel-sprites;
However the image path in the CSS is slightly wrong. Its output is this:
background-image: url('/images/channel-s78ec12c377.png')
But I actually need this:
background-image: url('../images/channel-s78ec12c377.png')
I've tried changing my import to this but it throws an error:
#import "../channel/*.png";
Turns out it was to do with the config.rb file. It needed this line:
relative_assets = true
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 .
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.