$ npm install stylesheet-loader
A webpack loader that imports a css file and converts it to be used as an inline style
npm install --save-dev stylesheet-loader
Config stylesheet loader in webpack.config.js
:
// webpack.config.js
module.export = {
module: {
loaders: [
{
test: /\.css$/,
loader: 'stylesheet'
}
]
}
};
/* foo.css */
.container {
background-color: blue;
}
.container_title {
font-size: 20px;
}
// foo.js
import styles from './foo.css';
function Foo() {
return <div style={styles.container}>
<span style={styles.container_title>hello world</span>
</div>;
}
export default Foo;
div {
color: red;
}
#main {
width: 100%;
}
{
'@div': {
color: 'red'
},
'#main': {
width: '100%'
}
}
webpack.config.js
:
{
test: /\.less$/,
loader: 'stylesheet!less'
}
// foo.less
@contaner-bg: #5B83AD;
@title-size: 20px;
.container {
background-color: @contaner-bg;
}
.container_title {
font-size: @title-size;
}
// foo.less
import styles from './foo.less';
function Foo() {
return <div style={styles.container}>
<span style={styles.container_title>hello world</span>
</div>;
}
export default Foo;
transformDescendantCombinator
Default does not support nested, but you can also choose to avoid this constraint when set transformDescendantCombinator
to true.
@font-face {
font-family: icon;
src: url(http://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf);
}
Media type support screen
and all
. Media features only support width
and height
. Look @media.
@media screen and (min-width: 480px) {
.title {
font-size: 25rem;
}
}
Pseudo class only in weex. Index of support pseudo classes
:active
:focus
:disabled
:enabled
Example
.container:active {
background-color: red;
}
You can use gradient in Weex 0.10.0+.
background-image: linear-gradient(to right, blue, white);
You can write var()
in css. Variables need to be defined in :root
:root {
--color-error-1: red;
}
.text {
color: var(--color-error-1);
}
Web:
body { background-color: #ffffff; }
@media (prefers-color-scheme: dark) {
body { background-color: #000000; }
}
@media (prefers-color-scheme: light) {
body { background-color: #ffffff; }
}
Weex:
Compile to -weex-dark-scheme-xxx and -weex-light-scheme-xxx
body {
background-color: #ffffff;
-weex-dark-scheme-background-color: #000000;
-weex-light-scheme-background-color: #ffffff;
}
We followed the css-layout style standard. There will be a friendly reminder on the console when your code is not standardized.
© 2010 - cnpmjs.org x YWFE | Home | YWFE