When I import my css file between style tags, it changes everything.
Why it is happening? How can I fix this problem?
I already used 'scoped 'feature but it is not working.
for instance
// in styles.css file
h1 { color: red; }
// in component file
<template> ... </template>
<script> ... </script>
<style scoped>
import './styles.css';
<style>
When I run server, it changes every h1 tags in project. I am using 'scoped' how can it happen.
Try with SCSS instead of CSS:
<style lang="scss" scoped>
#import './styles.css';
</script>
Related
I know about this method of injecting CSS:
import Head from 'next/head'
export default function Home() {
return (
<div className="container">
<style jsx global>{`
body {
margin: 0;
}
`}</style>
<Head>
<title>audiom</title>
<link rel="icon" href="/favicon.ico" />
</Head>
</div>
)
}
But is there a way to quickly insert a css file (css reset in my case)?
You can import reset.css in _app.jsx file, it will apply css reset styles for all pages.
_app.tsx
import '../styles/reset.css';
I use Laravel Mix to compile and extract component css to single file such as app.css. For example I have a component like this:
<template>
<div class="text"> </div>
<template>
...
<style>
.text{ color: red; }
</style>
In webpack.mix.js is:
mix.autoload({
jquery: ['$', 'window.jQuery','window.$'],
quill: ['window.Quill','Quill']
});
mix.options({
extractVueStyles: 'public/css/app.css',
});
mix.js('resources/assets/js/app.js', 'public/js')
.sourceMaps()
.version();
and I put this code in master..blade.php
<link rel="stylesheet" href="{{ url(mix('/css/app.css')) }}">
But app.css is empty and my component css put in html>head as inline style:
<html>
<head>
...
<style>
.text{ color: red; }
</style>
</head>
...
</html>
What should I do to extract and put all component css in app.css?
I have a very simple project in NextJs. I want to serve the files via NginX
These are my dependencies.
"dependencies": {
"isomorphic-unfetch": "^2.0.0",
"next": "^7.0.2",
"next-routes": "^1.4.2",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"semantic-ui-react": "^0.80.2"
}
My routes js
const routes = require('next-routes')();
module.exports = routes;
I have a common layout for entire application as shown here. Note the style jsx
import React from 'react';
import { Container } from 'semantic-ui-react';
import Header from '../components/header';
import Head from 'next/head';
const Layout = (props) => {
return(
<Container style={{margin:'30px', 'backgroundColor':'#fff','borderRadius': '5px'}}>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
<meta charSet="utf-8" />
<style jsx global>{`
body {
background: #202020;
font: 11px;
}
div.container {
margin: 30px;
padding-bottom: 2px;
}
`}</style>
</Head>
<Header />
<div className='container'>
{props.children}
</div>
</Container>
);
};
export default Layout;
All other pages would use this layout.
render() {
return(
<Layout>
<div>
my app
</div>
</Layout>
);
}
With Dev server, layout's styled jsx is getting applied properly. everything works just great.
If i do, npm run build & export and use the out content for static hosting, styled jsx is completely missing.
I also found that the out directory has index.html which is NOT serving the css. If use the index/index.html css is fine.
Again what is the right approach?
You need to put the <style jsx> tag outside <Head>. Basically all styled-jsx styles need to be a children element of the root.
Here's the working example
Simply download it (by clicking at the middle-top-left - there is a button to download).
<Container>
<Head>
...
</Head>
<div className="container">{props.children}</div>
<style jsx global>{`
body {
background: #202020;
font: 11px;
}
container {
margin: 30px;
padding-bottom: 2px;
}
`}</style>
</Container>
Here's some other useful info about styled-jsx that might help you better manage the styles:
Dynamic Styles
External Styles
Styles outside components
Also take into account that styled-jsx is not the only CSS-in-JS library out there. I personally prefer styled-components, you should check it out. Here's an example on how to implement it with Next.js.
Cheers
I am using webcomponents-lite (Polymer) to create webcomponents.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="/static/js/util.js"></script>
</head>
<body class="dark">
<main>
<edsp-login-form></edsp-login-form>
</main>
</body>
</html>
<edsp-login-form> is defined in js file where it uses lit-html. The definition as follows:
#Define('edsp-login-form', {
style: ``
})
export class Login extends LitComponent {
render() {
return html`
<link rel="import" type="css" href="styles.css">`
<div></div>
}
}
In this code, how do apply css classes from styles.css to a component <edsp-login-form> ?
Option 1: If you're using Shadow DOM, you can't apply external CSS to your component. A solution is to deactivate the Shadow DOM by implementing this in your component:
createRenderRoot() {
return this;
}
Option 2: If you still want to apply external CSS and use Shadow DOM, you can use CSS variables. In your external CSS you can instance the variable using something like:
name-of-your-component-tag {
--variable-name-color: #FFF;
}
and then in your component, you can use the CSS variable:
.my-class {
color: var(--variable-name-color);
}
Option 3: And if you're trying to apply a dark theme, you can use the CSS inside of your component considering the context. In your component you can use CSS like:
:host-context(.dark) .bg {
background: #000;
}
-My css3 vars are not showing. Here is the setup (scripts are removed and assumed all is well):
<dom-module id="my-app">
<style>
.tester {
color: var(--my-app-tester-color);
}
</style>
<template>
<div class="tester">abc</div>
</template>
</dom-module>
// app-theme.html:
<style is="custom-style">
my-app {
--my-app-tester-color: red;
}
</style>
I am following Rob's Polycast tutorial but nothing works.