stylesheet-loader 是 rax 提供的样式语法糖 webpack 插件。
使用该插件，不必纠结于驼峰 + key-value转换，写样式更流畅。
cnpm install --save-dev stylesheet-loader
修改 webpack.config.js 为 css 后缀名添加一种 loader :
module.export = {
//...
module: {
loaders: [
//你的其他loader
{
test: /\.css$/,
loader: 'stylesheet'
}
]
}
//...
};
/* index.css */
.container {
background-color: blue;
}
.title {
font-size: 32rem;
}
// index.js
import styles from './index.css';
//...
return (<View style={styles.container}>
<Text style={styles.title>hello nuke</Text>
</View>);
}
//...
cnpm install --save-dev less less-loader
修改webpack，添加 less loader 或替换原有的 css loader
module.export = {
//...
module: {
loaders: [
//你的其他loader
// ...
//刚才的css loader
{
test: /\.css$/,
loader: 'stylesheet'
},
// 新增
{
test: /\.less$/,
loader: 'stylesheet!less'
}
]
}
//...
}
// index.less
@bg: #3089dc;
@size: 32rem;
.container {
background-color: @bg;
}
.title {
font-size: @size;
}
// index.js
import styles from './index.less';
//...
return (<View style={styles.container}>
<Text style={styles.title>hello nuke</Text>
</View>);
}
//...
本文转自千牛UI官官网。