stylesheet-loader

A webpack loader that imports a css file and converts it to be used as an inline style

Install

npm install --save-dev stylesheet-loader

Usage

Documentation: Using loaders

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;

tag/id selector

div {
  color: red;
}

#main {
  width: 100%;
}

{
  '@div': {
    color: 'red'
  },
  '#main': {
    width: '100%'
  }
}

Write less

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;

Options

`transformDescendantCombinator`

Default does not support nested, but you can also choose to avoid this constraint when set transformDescendantCombinator to true.

Support font-face

@font-face {
  font-family: icon;
  src: url(http://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf);
}

Support media query

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;
  }
}

Support pseudo class

Pseudo class only in weex. Index of support pseudo classes

:active
:focus
:disabled
:enabled

Example

.container:active {
  background-color: red;
}

Support gradient

You can use gradient in Weex 0.10.0+.

background-image: linear-gradient(to right, blue, white);

Support global css variables

You can write var() in css. Variables need to be defined in :root

:root {
  --color-error-1: red;
}
.text {
  color: var(--color-error-1);
}

Support light or dark color theme.

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;
}

Validation

We followed the css-layout style standard. There will be a friendly reminder on the console when your code is not standardized.

stylesheet validation

Current Tags

0.9.1-beta.9 ... beta (3 years ago)
0.9.1 ... latest (3 years ago)
0.9.1-rc.4 ... rc (3 years ago)

117 Versions

0.9.1-beta.9 ... 3 years ago
0.9.1-beta.8 ... 3 years ago
0.9.1-beta.7 ... 3 years ago
0.9.1-beta.6 ... 3 years ago
0.9.1-beta.5 ... 3 years ago
0.9.1-beta.4 ... 3 years ago
0.9.1-beta.3 ... 3 years ago
0.9.1-beta.2 ... 3 years ago
0.9.1 ... 3 years ago
0.9.1-beta.1 ... 3 years ago
0.9.1-rc.4 ... 3 years ago
0.9.1-rc.3 ... 3 years ago
0.9.1-rc.2 ... 3 years ago
0.9.1-rc.1 ... 3 years ago
0.9.0 ... 4 years ago
0.8.6-beta.2 ... 4 years ago
0.8.6 ... 4 years ago
0.8.6-beta.1 ... 4 years ago
0.8.5 ... 4 years ago
0.8.5-0 ... 4 years ago
0.8.4 ... 5 years ago
0.8.4-beta.0 ... 5 years ago
0.8.3 ... 5 years ago
0.8.2 ... 5 years ago
0.8.2-beta ... 5 years ago
0.8.1-0 ... 5 years ago
0.8.1 ... 5 years ago
0.8.0 ... 5 years ago
0.7.0 ... 5 years ago
0.6.10 ... 5 years ago
0.6.9 ... 5 years ago
0.6.8 ... 5 years ago
0.6.7 ... 5 years ago
0.6.6-0 ... 6 years ago
0.6.5 ... 6 years ago
0.6.4-1 ... 7 years ago
0.6.4 ... 7 years ago
0.6.3 ... 7 years ago
0.6.2 ... 7 years ago
0.6.1 ... 7 years ago
0.6.0 ... 7 years ago
0.5.4 ... 7 years ago
0.5.2 ... 7 years ago
0.5.1 ... 7 years ago
0.5.0 ... 7 years ago
0.4.20 ... 7 years ago
0.4.19 ... 7 years ago
0.4.18 ... 7 years ago
0.4.17 ... 7 years ago
0.4.16 ... 7 years ago
0.4.15 ... 7 years ago
0.5.0-beta ... 7 years ago
0.4.14 ... 7 years ago
0.4.13 ... 7 years ago
0.4.12 ... 7 years ago
0.4.11 ... 7 years ago
0.4.10 ... 7 years ago
0.4.9 ... 7 years ago
0.4.8 ... 7 years ago
0.4.7 ... 7 years ago
0.4.6 ... 7 years ago
0.4.5 ... 7 years ago
0.4.4 ... 7 years ago
0.4.3 ... 7 years ago
0.4.2 ... 7 years ago
0.4.1 ... 7 years ago
0.4.0 ... 7 years ago
0.3.8 ... 8 years ago
0.3.7 ... 8 years ago
0.3.6 ... 8 years ago
0.3.5 ... 8 years ago
0.3.4 ... 8 years ago
0.3.3 ... 8 years ago
0.3.2 ... 8 years ago
0.3.1 ... 8 years ago
0.3.0 ... 8 years ago
0.2.11 ... 8 years ago
0.2.10 ... 8 years ago
0.2.9 ... 8 years ago
0.2.8 ... 8 years ago
0.2.7 ... 8 years ago
0.2.6 ... 8 years ago
0.2.5 ... 8 years ago
0.2.4 ... 8 years ago
0.2.3 ... 8 years ago
0.2.2 ... 8 years ago
0.2.1 ... 8 years ago
0.2.0 ... 8 years ago
0.1.9 ... 8 years ago
0.1.8 ... 8 years ago
0.1.7 ... 8 years ago
0.1.6 ... 8 years ago
0.1.5 ... 8 years ago
0.1.4 ... 8 years ago
0.0.19 ... 8 years ago
0.0.18 ... 8 years ago
0.0.17 ... 8 years ago
0.0.16 ... 8 years ago
0.0.15 ... 8 years ago
0.0.14 ... 8 years ago
0.0.13 ... 8 years ago
0.0.12 ... 8 years ago
0.0.11 ... 8 years ago
0.0.10 ... 8 years ago
0.0.9 ... 8 years ago
0.0.8 ... 8 years ago
0.0.7 ... 8 years ago
0.0.6 ... 8 years ago
0.0.5 ... 8 years ago
0.0.4 ... 8 years ago
0.0.3 ... 8 years ago
0.0.2 ... 8 years ago
0.1.3 ... 8 years ago
0.1.2 ... 8 years ago
0.1.1 ... 8 years ago
0.1.0 ... 8 years ago
0.0.1 ... 9 years ago