Well, I'm using Brunch.io to replace the traditionnal Grunt.js. To perfom the build very fast, I've set on my brunch-config.coffee file, the "native" mode, and I've downloaded all the compass mixins
plugins:
sass:
mode: 'native'
I've not tryed all the compass-mixins, but everything seem's allright, except when I try to include web-font, so adding this on a _font.scss file for exemple :
#include font-face("oxy_reg",
font-files("oxygen-regular-webfont.eot",
"oxygen-regular-webfont.svg",
"oxygen-regular-webfont.ttf",
"oxygen-regular-webfont.woff"
));
result this on the generated css file :
#font-face {
font-family: "oxy_reg";
src: font-files("oxygen-regular-webfont.eot", "oxygen-regular-webfont.svg", "oxygen-regular-webfont.ttf", "oxygen-regular-webfont.woff"); }
but it's not a good css format, the right one (doing by ruby, when I set mode to "ruby" on the brunch-config.coffee) should be this :
#font-face {
font-family: "oxy_reg";
src: url('oxygen-regular-webfont.eot?1422206651') format('embedded-opentype'), url('oxygen-regular-webfont.svg?1422206651') format('svg'), url('oxygen-regular-webfont.ttf?1422206651') format('truetype'), url('oxygen-regular-webfont.woff?1422206651') format('woff'); }
well, I've got no error, but the generated script is not good !
Hope someone get a idea what I'm doing wrong !
see you
Related
I am using creat-react-app (CRA) and simply want to include a png file placed in the public folder via CSS (I keep all image files there).
Now I am trying to reference this image via CSS (I only added the background-image line to a freshly generated CRA app):
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
background-image: url("../public/example.png");
}
You attempted to import example.png which falls outside of the project src/ directory
How do I reference the image file from within the CSS-file without copying somewhere inside /src? I also don't want to eject the application and get rid of the error message.
Edit: This question is different from The create-react-app imports restriction outside of src directory because it does not show how to solve this problem at a CSS level. The proposed solution is to add the style inside the JavaScript file which I don't want to do.
Just use a / before the name, this will make it relative to the output root, which includes anything in the public folder (provided the finished hosted application is served at the root of a domain).
so for the question asked above:
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
background-image: url("/example.png");
}
the critical part being
/example.png
refers to a file, example.png, that is in the public folder (served at the root level)
Could also be relative:
one could also use
./example.png
provided that the css file was also imported from the public/build directory, this would be relative to the css file and not depend on being served at the domain root, but typically in CRA webpack will bundle the CSS and it may or may not be loaded from this location. (you could import it in the html file directly using rel tag with the %PUBLIC_URL%/Styles.css macro)
In my case, to access the images from css/scss, had to move the images directory as well as fonts, to the src directory. After which i was able to refer them in the css/scss files directly,
background-image: url("/images/background.jpg");
references:
https://github.com/facebook/create-react-app/issues/829
https://create-react-app.dev/docs/using-the-public-folder/
there is a special page about the /public folder in the official documentation:
https://create-react-app.dev/docs/using-the-public-folder/
Here is how you should refer to the public folder:
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
or
render() {
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}
BUT, you can't use those solution in a css file. So you'll have to precise the ressource from the js files:
const MyComp = () => {
return <div style={{ backgroundImage: `${process.env.PUBLIC_URL}/img/logo.png` }} />;
}
I was using "public" folder but it says here to use images inside "src" folder:
https://create-react-app.dev/docs/using-the-public-folder/
"Normally we recommend importing stylesheets, images, and fonts from
JavaScript."
Remove the extra .. in the relative path. :)
Use "./image.png".
The logic behind is that the css file you will place the code in, will be part of index.html when the app is finished, built and deployed.
The only way that helped me is adding full URL-adress to the image path. So this one can help:
background-image: url("http://localhost:3000/background.jpg");
Using the URL directly doesn't work for my environment, for me I needed to specify the path TO the image FROM the current directory.
eg;
/src/styles/style.css
cursor: url("../../public/images/image.png"), auto;
/src/public/images/image.png
background-image: url("http:/images/pexels-photo-1.jpg");
I'm developing an App using Ionic 2. Right now, I've this style:
ion-content {
background-image: url('/assets/images/orange-background.svg');
background-repeat: no-repeat;
background-size: 101%;
}
When I ionic serve this works fine, but when I upload a new version to Ionic View channel, this example doesn't work neither any example of background-image with an .svg.
I already tried Ionic - svg does not appear but didn't work.
Thanks in advance.
Edit 1
I already tried this url in background-image:
assets/images/orange-background.svg
/assets/images/orange-background.svg
../assets/images/orange-background.svg
./assets/images/orange-background.svg
None of this worked :'(
Edit 2
I just discovered that this problem only happens on iOS.
Maybe the url is incorrect. In the .css files: url ('../assets/images/orange-background.svg').
In other case, did you make the difference: In Whindows an image.SVG will works when you test the app in a browser but wont in Linux (Also Android). It seems that an image.SVG is the same as image.svg in windows.
I had a similar problem, and I realized that the file was called "Background.svg", and on my css I had:
background-image: url("../assets/imgs/background.svg");
Once I changed the file name to "background.svg" the problem was fixed.
I am an error getting that looks like this in my Google chrome(56.0.2924.87) console while trying to use bootstrap glyphicons
Even though i have my .woff files and .ttf files located in my "public/css/fonts" folder.
Addtional Information
I am using Wampserver with apache(2.4.23)
I installed bootstrap.css with "npm install bootstrap"
This is what my font-face looks like
#font-face {
font-family: 'Glyphicons Halflings';
font-style: italic;
src: url('/public/css/fonts/glyphicons-halflings-regular.eot');
src: url('/public/css/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/public/css/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/public/css/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/public/css/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/public/css/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
I try to call the glyphicons like this:
<i class="glyphicon glyphicon-chevron-left"></i>
Does anyone have any idea where this problem might be located?
Double check #font-face location path and also the mime type.
I want to add Bootstrap CSS to my own sub-elements by using SASS inheritance:
nav > a {
#extend: .nav-item;
#extend: .nav-link;
}
I use Node with webpack for bundling. And I've installed the bootstrap-sass but I can't seem to get the #import 'bootstrap' to work. All I get is File to import not found or unreadable: bootstrap. The sass part of the webpack code is:
module: {
loaders: [
....,
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass'),
}],
I guess this must be something trivial that I've missed. It's not entirely surprising that SASS doesn't have access to the library but I haven't found any good hints on how to provide the library directly to SASS.
I literally have no what you have done so far for setup and other things. In simple english, if you are using SASS files downloaded from bootstrap's official website, you can use their mixins, variables and extend code in your own code file. Though it needs proper project setup for files and import them in a proper way.
In the shared code, your syntax for #extend appears to be wrong. I have shown a dummy code snippet for demo purpose.
// code already written inside Bootstrap source file.
.nav-item {
background:red;
}
.nav-link {
color: #fff;
}
// your code
.nav > a {
#extend .nav-item;
#extend .nav-link;
}
You can use http://www.sassmeister.com/website for trial and error.
This is what it looks like, when compiled.
So I've been trying to use Assemble to build e-mails, and up until now it works; the problem is that now, when I try to run the Assemble command, it fails. Or, more accurately, it succeeds, with a message reading "0 pages assembled" despite no actual compiled files appearing. I'm honestly at a loss as to what the issue is here, as all of the options seem configured to point to the right folders (relative to the root directory where the gruntfile is located) and up until recently it was working.
I'm not really sure what's broken here; the relevant section of the grunt config object is excerpted below; the full config object is a little long to include in full here.
assemble: {
'default': {
options: {
layoutdir: 'src/layouts'
},
pages: {
src: ['src/emails/*.hbs'],
dest: 'dist/'
}
}
}
Any thoughts on where I've gone wrong?
oh... you have too many layers in your assemble configuration. Remove the 'default' object wrapping:
assemble: {
options: {
layoutdir: 'src/layouts'
},
pages: {
src: ['src/emails/*.hbs'],
dest: 'dist/'
}
}
In this case, options is for all assemble targets, and pages is one of the targets.