I'm having an issue with my react-slick carousel. I'm following official documentation and installation steps but I'm getting this error:
It seems to be a very common error, and I've tried solution which I've found here on stackoverflow - delete this block of code from slick-theme.scss.
/* Slider */
.slick-list {
.slick-loading & {
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
}
/* Icons */
#if $slick-font-family == "slick" {
#font-face {
font-family: "slick";
src: slick-font-url("slick.eot");
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
}
Firstly, it doesn't help, but after 5 minutes of trying to find another solution it magically starts working and now, after 10 minutes of trying to configure it, stylize it and add content to slides, this error fires again.
Does anybody please have solution for this? Or maybe some advice for different React carousel which is not as buggy as this one? Even if it starts working for 10 minutes, some features didn't work, for example, dots, the were no arrows for switching slides, etc.
Thanks for any help.
Related
So I am building a site with the hugo-book theme. The docs here (under Extra Customization) say to create scss files under ./assets, while the theme submodule itself stores its css defaults under ./theme/hugo-book/assets.
Following this logic I created an scss file at ./assets/_fonts.scss:
/* merriweather-regular - latin */
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
src: local(''),
url('fonts/merriweather-v28-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/merriweather-v28-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* merriweather-italic - latin */
#font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
src: local(''),
url('fonts/merriweather-v28-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/merriweather-v28-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
font-family: 'Merriweather', sans-serif;
}
but hugo is still picking up the default roboto font from the theme directory. The fonts are stored under ./static/fonts and the hugo compiler seems to be picking up the changes.
Should I instead be making changes to the hugo-theme submodule and not worrying about it? That doesn't seem right. Searching the internet shows references to a custom_css params entry in config.toml but it would be pointing to ./assets - is this not the default?
Asking here before I ask the hugo-book author, in case I am missing something simple.
You have to create an assets folder from the root of your theme. This assets folder should not be inside any other folder.
For the fonts, create a folder by the name of static and inside of that create another one by the name of fonts and put your web fonts inside of it.
For the fonts to work, paste the font stylesheet into _custom.scss partial and change the URL path there. After that these should work without any issues.
Note: the static folder shouldn't be inside another folder.
assets
_custom.scss
static/fonts
webfonts.woff
Heya so I realised the Sass team discourages use of #import (https://sass-lang.com/documentation/at-rules/import) so I've tried to use #use.
I'm very new to using Sass in React (discouraged from using Styled-components which I'm more familiar with). When trying to import a variable to my InputBar.module.scss I get this error:
Failed to compile
./src/stylesheets/modules/InputBar.module.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-6-4!./src/stylesheets/modules/InputBar.module.scss)
SassError: Invalid CSS after "...nt-family: vars": expected expression (e.g. 1px, bold), was ".$contentfont;"
on line 7 of /Users/Jamming/_projekt/_kod/timeatask/client/src/stylesheets/modules/InputBar.module.scss
>> font-family: vars.$contentfont;
-------------------^
So yeah, not sure what to do, I've tried everything. Pretty sure I've set up everything wrong or my way of working with Scss + React is completely off. Have a look at my code:
stylesheets/modules/_vars.scss
$primaryBG: #f0f7ff;
$h1font: 'Montserrat Subrayada';
$contentfont: Montserrat, sans-serif;
stylesheets/modules/InputBar.module.scss
#use 'vars';
.container {
[...]
font-family: vars.$contentfont;
}
Components/InputBar.js
import styles from '../stylesheets/modules/InputBar.module.scss'
[...]
<form className={styles.container}
which works fine when I remove this from InputBar.module.scss
font-family: vars.$contentfont;
I also have a stylesheets/main.scss which
#import './modules/vars.scss';
So. where am I completely lost? please enlighten me :-)
edit: project is bootstrapped with create-react-app
edit: + node-sass
Might've found an answer to my problem. #use keyword isn't supported in node-sass yet.
https://github.com/sass/node-sass/issues/2886
I think I will have to stick with #import.
I'm building a website that uses two purchased fonts, both .woff. One loads correctly, the other doesn't, and the console logs an error 'File not found'.
A quick Google suggested this might be the solution: Why is #font-face throwing a 404 error on woff files?
However, if this was the case, surely the other woff file wouldn't load either? What on earth is going on? The first font works, the second does not.
#font-face {
font-family: UnitSlabBlack;
src: local('☺'), url("/fonts/UnitSlabWeb-Black.eot");
}
#font-face {
font-family: UnitSlabBlack;
src: url("/fonts/UnitSlabWeb-Black.woff") format("woff");
}
#font-face {
font-family: UnitSlabLight;
src: url("/fonts/UnitSlabWeb-Light.eot");
}
#font-face {
font-family: UnitSlabLight;
src: url("fonts/UnitSlabWeb-Light.woff") format("woff");
}
You could check your path - one difference I see is that one reference begins with a forward slash and the other one doesn't.
On my site, I use SASS
I have the following code:
--- Edit ---
#font-face {
font-family: 'BauhausBold';
src: url('/Type/bauhaus_bold.eot');
src: url('/Type/bauhaus_bold.eot?#iefix') format('embedded-opentype'),
url('/Type/bauhaus_bold.woff') format('woff'),
url('/Type/bauhaus_bold.ttf') format('truetype'),
url('/Type/bauhaus_bold.svg#BauhausBold') format('svg');
font-weight: normal;
font-style: normal;
}
To use this font:
font-family: quote('bind'), arial;
But we always get the error 404 on my site. See the image:
Full image: http://i.stack.imgur.com/jAhWY.png
You can access the site: bindsolution.com if they wish.
Thank you all for your help!
I've just had exactly same problem and I couldn't solve it. I thought it was due to relative path but it wasn't. It turned out that I had my fonts names in CSS in uppercase while the files' names were actualy lower case. Previous server didn't care but this one does. That is all.
Hey all. I've done tons of searching and still nothing. My element has the following CSS and the PIE.htc file is definatly in the correct folder. Still no curvey corners in IE6-8 :(
#nav {
width:500px;
border:2px solid #eee;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(/PIE.htc);
position:relative;
z-index: 0;
}
Check that your PIE.htc file is being served with the correct HTTP content-type header. It needs to be "text/x-component", but some servers do not have this set up correctly and send something like "text/plain" or "text/html" instead; IE will ignore the behavior file if this is the case.
More suggestions can be found at http://css3pie.com/documentation/known-issues/