I have icon.svg in src/assets directory.
And I want to use this svg file in some scss file.
like this
select {
background: url("/src/assets/icon.svg") no-repeat ...;
}
but it doesn't work. and i can see this error
ERROR in ./src/components/atoms/Common/Dropdown/styles.module.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[8].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[4]!./src/components/atoms/Common/Dropdown/styles.module.scss) 5:36-104
i have tried these:
background: url("data:image/svg+xml;, /src/assets/icon.svg")
background: url(`data:image/svg+xml;, ${/src/assets/icon.svg}`)
background: url("data:image/svg+xml;" + "/src/assets/icon.svg")
and finally i solved this problem to this
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.258' height='10.164' viewBox='0 0 18.258 10.164'%3E%3Cg id='dropdown_icon' transform='translate(1.06 1.061)'%3E%3Cpath id='dropdown_icon-2' data-name='dropdown_icon' d='M-.09.18,8.264,8.371-.09,16.316' transform='translate(16.316 0.09) rotate(90)' fill='none' stroke='%23333d4b' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.5' /%3E%3C/g%3E%3C/svg%3E")
but i don't want this. i want short code with using my svg file.
How can i do?
This looks like a webpack error. Try appropriate svg loaders like: svg-url-loader.
Good luck!
You should be able to do it with the same url.
I think you can use (/assets/icon.svg).
try this:
.select {
display: block;
content: ' ';
background-image: url('/assets/icon.svg');
background-size: 50px 50px;
height: 50px;
width: 50px;
}
Related
I’m trying to make my brand image larger at the top of the page, but Webflow is not allowing me. Anyone know how to fix this? Also does anyone know how to change the gradient colors in this template?
https://preview.webflow.com/preview/dan-the-baking-man-upgraded?utm_medium=preview_link&utm_source=designer&utm_content=dan-the-baking-man-upgraded&preview=d77107e0ddecb4c38fc4f9487940ab48&workflow=preview
To increase the size of your logo to say 100x100px, try
.brand-image {
height: 100px;
max-height: 100px;
width: 100px;
}
If this doesn't work, test if you need to add !important; to each of the properties.
For the colours, it looks to me that they are set in 2 places
body {
background-color: var(--swatch_879f80bc);
}
and
.background-primary-image{
background-image: url(https://uploads-ssl.webflow.com/6144c33b7975b17710abbbef/6144c33b7975b10e34abbc4e_Background%20Gradient.png);
}
hi im having the current problem, im trying to set a background with a video playing in loop, but at the moment of importing the mp4 video from the folder it gives me this error
error - ./videos/video.mp4
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
this is how my component is beign created
import React from 'react'
import styled from 'styled-components';
import Video from '../../videos/video.mp4';
const HeroContainer = styled.div`
background: #0c0c0c;
display: flex;
justify-content: center;
align-items: center;
padding: 0 30px;
height: 800px;
position: relative;
z-index: 1;
`
const HeroBg = styled.div`
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
`
const VideoBg = styled.video`
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
background: #232a24;
`
export default function Hero() {
return (
<HeroContainer>
<HeroBg>
<VideoBg autoPlay loop muted src={Video} type='video/mp4'/>
</HeroBg>
</HeroContainer>
)
}
i really dunno what the problem could be
You need to define loader to import .mp4 file. This kind of error occurs with other file types, too. For example, I met this error when I tried to import .gql file. To solve the problem, you need to define loader for the specific file type.
If you are using webpack, this might help you.
How to load a local video in React using webpack?.
P.S. I personally dislike this kind of settings. I would like to say just give a url if possible.
I'm doing a create-react-app project and there is a weird situation here.
I'm importing like this:
import styles from './UserLoginModal.module.css';
Applying in like this:
const errorMessage = <Typography variant='h5' className={styles.errorMessage}>Ocurrio un error al iniciar sesión: {error}</Typography>
And my .css file looks like this:
.errorMessage {
margin-top: 1rem;
text-align: center;
color: red;
}
My text-align and the red color are working, but the margin doesn't!! If I use the margin with inline style it works properly:
style={{marginTop: 1}}
There might be a style overwriting the margin style from your css file .
You may want to use !important with your style :
.errorMessage {
margin-top: 1rem !important;
text-align: center;
color: red;
}
To find out the style overwriting your css styles , you can inspect the element with browser developer tools and check which styles apply to the element .
I am trying to get the envelope icon to show after the Envelope link using REACT
in my index.js file, I have:
<Envelopestyling>
<p><i className="fas fa-envelope"><Link>Envelope</Link></i></p>
</Envelopestyling>
in my styling.js file, I have:
export const Envelopestyling = styled.div`
position: relative;
border: 2px solid black;
border-radius: 5px;
background: #fff;
margin: 10px 0;
padding: 10px;
text-align: left;
& . fas fa-envelope{ position: absolute, top:10px, colour: #000}
& .fas fa-envelope:after{
content:"\f0e0";
}
`;
All this does is duplicate the envelope icon: one in before the Envelope link and another after it but what I want is the envelope after the Envelope Link.
Any help is greatly appreciated. Thank you
I saw the problem is you are using css selector wrong way. You need to update like this:
& .fas.fa-envelope{ position: absolute, top:10px, colour: #000}
& .fas.fa-envelope:after{
content:"\f0e0";
}
I am using mixins and media for first time and my css skills aren't that great either. Its used in React app. I am getting SassError: Undefined mixin. Error on this piece of code and not sure what I am missing here. Is there any library I need to bring in?
In my map.tsx file I am importing scss file and using the div tag
import styles from "./map.module.scss";
<div className={styles.helpbutton}>
<AboutPopup />
</div>
In my map.module.scss I have this css
.helpbutton {
position: absolute;
bottom: 2em;
right: 2em;
#include for-phone-only {
position: absolute;
top: 2em;
right: 2em;
}
}
#mixin for-phone-only { // Seems like error is coming here
#media (max-width: 599px) {
#content;
}
}
But I am getting this error SassError: Undefined mixin.
Not sure why is it saying its undefined when it is right there in the same file.