I create a simple react/electron project with "electron-forge" plugin : electron-forge init myProject --template=react. I try to import my css file with this code below
Button.module.css
.error {
color: red;
}
app.jsx - created by electron-forge:
import React from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
export default class App extends React.Component {
render() {
return (
<div>
<h1>Hello world</h1>
<button className={styles.error}>Error Button</button>
</div>
)
}
}
It throws an error:
Uncaught Error: Couldn't find a compiler for /home/denny/Experimentals/electron-transactionsell/src/Button.module.css
I'm pretty sure I have the file in the correct folder
and I am sure that this is how it's done in React
https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet
Related
**This is my Styles.css File**
.headingStyle
{font-size:4rem;
color:blue;}
Iam importing these styles here but nothing is being applied to the heading
import React from "react"
import styles from "./Css/styles.css"
function App()
{
return (
<div>
<h1 class={styles.headingStyle}> CSS3 Testimonials Slider</ h1>
</div>
)
}
export default App
According to create-react-app documentation on CSS modules you should name your file styles.module.css and then import it like you already did
import styles from './styles.module.css';
Import CSS file directly.
Use className instead of class
Try this
import React from "react"
import "./Css/styles.css"
function App()
{
return (
<div>
<h1 className="headingStyle"> CSS3 Testimonials Slider</h1>
</div>
)
}
export default App
first of all thank you so much for your time.
My doubt is simple, but i couldn't find a way to get it working.
So... basically i have a '/pages/_app.js' file:
import '../public/styles/global.css';
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
A global css file '/public/styles/global.css':
:root {
--bg-color: #000;
}
A css module file '/public/styles/header.module.css':
.header {
background-color: var(--bg-color);
}
And finally a home page '/pages/index.js'that uses the css class:
import React from 'react';
import headerStyle from '../public/styles/header.module.css';
export default function Home() {
return <div className={headerStyle.header}>Test</div>;
}
I don't get an error but i didn't manage to refer to the global variables inside the css modules.
Can you guys help me with what am i doing wrong?
If the pages/ directory exists under src/ then the path to the <Home> component should be /src/pages/ and the import for the headerStyle should be the following:
import headerStyle from "../../public/styles/header.module.css";
You just need to go up one more directory.
/*
* #filename /src/pages/index.jsx
*/
import React from "react";
import headerStyle from "../../public/styles/header.module.css";
const Home = () => {
return <div className={headerStyle.header}>Test</div>;
};
export default Home;
Here is a CodeSandbox snippet to demonstrate.
I have multiple stylesheets. Let's say navbar.css and footer.css. I want to use the pseudo-element :root in both of these css files to define variables. However, I don't want the variables to be accessible to the other css file. When I use both of these components, the css files merge together and my styles clash. How can I prevent this?
App.jsx
---
import React from "react";
import Navbar from "./Navbar";
import Footer from "./Footer";
export default class App extends React.Component {
render() {
<Navbar/>
<p>blah blah</p>
<Footer/>
}
}
Navbar.jsx
---
import React from "react";
export default class Navbar extends React.Component {
render() {
<div>...</div>
}
}
Footer.jsx
---
import React from "react";
export default class Footer extends React.Component {
render() {
<div>...</div>
}
}
Navbar.css
---
:root {
bg-col: white;
}
Footer.css
---
:root {
bg-col: black;
}
Now, I have shortened these files to keep it simple, but, the bg-col variables clash with each other. How can I fix this?
You can try with CSS module. In that way, one css file is separate and independent from another. Maybe add a class to that root element and the problem is solved.
Create two files
Navbar.module.css
Footer.module.css
and in your Navbar.jsx and Footer.jsx just import these modules.
Navbar.jsx
---
import React from "react";
import styles from './Navbar.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
export default class Navbar extends React.Component {
render() {
<div className={styles.root}>...</div>
}
}
I have below code structure,
and my src/components/App.js look like this
import React, { Component } from 'react'
import { max_number } from '../helper'
class App extends Component {
render() {
return (
<div>
</div>
)
}
}
export default App
As you can see helper folder is the same level as components, but somehow I got error of Module not found: Can't resolve '../helper' in '/Users/james/Documents/react-demo/src/components'
helper.js is a directory you need to import from '../helper.js'
preferably rename the folder to helper
I am learning meteor framework for the first time today. I installed react react-dom and react-mounter through npm instead of atmospherejs.I am facing a problem that says Cannot find module '../../client/components/layouts/home.jsx'. I dont think there is error in path.Because my routing.jsx is inside routing directory that is inside lib directory and home.jsx is inside layouts directory which is inside components subdirectory of client directory.
lib - routing - routes.jsx
client - components - layouts - home.jsx
routes.jsx
import React from 'react';
import {mount} from 'react-mounter';
import HomeLayout from '../../client/components/layouts/home.jsx';
import Layout from '../../client/components/layouts/layout.jsx';
publicRoutes = FlowRouter.group({
name:'publicroutes'
});
privateRoutes = FlowRouter.group({
name:'privateroutes'
});
publicRoutes.route('/',{
name:'Home',
action(){
mount(
HomeLayout, {}
)
}
});
publicRoutes.route('/dashboard',{
name:'Dashboard',
action(){
mount(Layout,{
sidebar:<div>Sidebar</div>,
content:<div>Content</div>
})
}
});
home.jsx
import React, { Component } from 'react';
export default class HomeLayout extends Component{
render(){
return(
<div className="container">
<div className="row">
<div className="col-md-6">
Features
</div>
<div className="col-md-6 col-md-offset-1">
Signup
</div>
</div>
</div>
);
}
}
What might be the reason?