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.
Related
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;
}
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 have nested selectors in my css file. I'm new to React and trying to make it work with my js file. Does anyone have any tips?
I found: https://blog.logrocket.com/the-best-styling-in-react-tutorial-youve-ever-seen-676f1284b945
It seems to be helpful but does not mention how to deal with nested css. For example, I have &:before and &:after, #include signUpActive, among others. This is really some confusing stuff.
.img {
overflow: hidden;
z-index: 2;
position: absolute;
&:before {
content: '';
position: absolute;
transition: transform 1.2s ease-in-out;
}
&:after {
content: '';
position: absolute;
}
#include signUpActive {
&:before {
transform: translate3d(640px,0,0);
}
}
&__text {
z-index: 2;
position: absolute;
transition: transform 1.2s ease-in-out;
&.m--up {
#include signUpActive {
transform: translateX(260px*2);
}
}
&.m--in {
transform: translateX(260px * -2);
#include signUpActive {
transform: translateX(0);
}
}
}
&__btn {
overflow: hidden;
z-index: 2;
position: relative;
&:after {
content: '';
z-index: 2;
position: absolute;
}
&.m--in {
transform: translateY(36px*-2);
#include signUpActive {
transform: translateY(0);
}
}
&.m--up {
#include signUpActive {
transform: translateY(36px*2);
}
}
}
}
}
It is actually not "nested CSS". But it is a SASS/SCSS code. Both SASS and SCSS have similar purposes, with several slight differences. Please check here for more detail: https://www.geeksforgeeks.org/what-is-the-difference-between-scss-and-sass/ . Personally, I would suggest SCSS over SASS by considering it is less strict than SASS.
If you like to use just normal CSS, then just write and import CSS scripts to your react. It will be no problem. You should not follow that "nested CSS" way which is SASS/SCSS ( I would not recommend that actually ).
Let assume you stick with SASS/SCSS. If you are using "CRA" ( create react application ), it is just as simple as import your .scss file to react component like the following:
import React from "react";
import ReactDOM from "react-dom";
import "./styles.scss";
function App() {
return (
<div className="App">
<div className="panel">
<h2>Panel</h2>
<div className="panel__inner">
<h3>Inner panel</h3>
</div>
</div>
</div>
);
}
While the styles.scss is just a normal SCSS code at same directory, like follow:
#import "./scss-mixins/mixins.scss"; //Using relative path to the .scss file
.App {
font-family: sans-serif;
text-align: center;
.panel {
padding: 15px;
background: #f9f9f9;
&__inner {
padding: 10px;
background: green;
}
}
}
Just ensure that you have node-sass in your package. Otherwise you should do npm install node-sass --save. Please read more at official documentation here: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet.
You can check working example at: https://codesandbox.io/s/x2z4ly6y2z
I just imported .css stylesheet in my component and the problem occured in generated file, it causes error like require.js:5 Uncaught Error: Script error for "src/Container.css", needed by: Container
folder structure
App
node-modules
src
Container.css
Container.jsx
dest
Container.css
Container.js
src - Container.jsx :
import './Container.css';
const Container = () => (
<div className="block"> // i know that here i can use like {style.block} if I do like import style from './Container.css';
<p className="message">Get started !!!</p>
</div>
);
ReactDOM.render(<Container />, document.getElementById('App'));
Container.css :
.block {
height: 100%;
margin-bottom: 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px -3px;
background: rgb(255, 255, 255);
border-width: 1px;
border-style: solid;
border-color: rgb(221, 221, 221);
border-image: initial;
padding: 15px;
}
.message {
color: #413b3b;
font-size: 18px;
}
I'm not sure how to import Container.css in my Container.jsx file and make it work and I'm using grunt-babel to transpiling jsx to js and require.js
.
So I am clearly stating that I'm not using webpack and css-modules. I know using css-modules is a wise way, but not sure how to implement without webpack.
I have imported my css stylesheet in my component and it causes when I run my application.I have implemented inline styling that's works but i want to know is there's any better ways to accomplish this.
Thanks in advance.
import containerStyles from './Container.css';
First Solution --->
Write inside render() -
let cls_block = `${containerStyles.block}`;
In html section-
className={cls_block}
Second Solution --->
className={containerStyles.block}
Got solution still answering here, it will help some people who needs to work react with grunt and babel. If you need to import your css file in your component like
import './Container.css';
you need this plugin : https://github.com/guybedford/require-css
by using this you can import it like :
import 'css!./Button_Styles.css';
this answer for people who are using grunt and require , not webpack and css-modules.
Why: I am dissecting another developers code to learn React
Where this was found: In a React app: On GitHib
Folder Structure: components > Button
Files Contained: index.jsx & styles.scss
What I think it means: It seems pretty obvious to me that this locks the scss styling to the local folder (specifically the element with the attribute of styleName = Button). However, I'm confused because I cannot find any other reference to this technique anywhere online. The closest thing I can find are articles talking about :export and :import.
What dependency allows this to happen?
Is this native to Sass?
Is this created by the dev to serve a specific purpose?
...and other such clarifying questions.
:local(.Button) {
background-color: #fff;
border: 0;
border-radius: 5px;
cursor: pointer;
color: #27466E;
padding: 7px 12px;
&:hover {
opacity: 0.8;
}
&:disabled {
opacity: 0.5;
}
}