Remax 默认支持 css/less/sass/stylus,安装你需要的样式处理器,即可使用。如:

  1. npm install less --save # less 用户
  2. npm install node-sass --save # sass 用户
  1. import './index.css';
  2. import './index.less';
  3. import './index.scss';

Remax 会自动把 px 转换成小程序 rpx

  1. .view {
  2. height: 16px;
  3. }
  1. .view {
  2. height: 16rpx;
  3. }

如果你不想转换 px ,就写成 PX,如:

  1. .view {
  2. height: 16PX:
  3. }

如果整个项目都不想转换 px 则可以在配置中将 pxToRpx 选项置为 false

Remax 同时也支持 Css Modules

所有以 module.css|less 结尾的文件都将按照 Css Modules 处理。如:

  1. /* index.module.css */
  2. .view {
  3. display: flex;
  4. }
  1. import styles from './index.module.css';
  2. export default function() {
  3. return <View className={styles.view}> view </View>;
  4. }

你也可以通过 remax.config.js 配置不同的 Css Modules 匹配规则,关于 Remax 配置请参考 指南 - 配置

小程序自定义组件样式

Remax 使用的是 React 组件特性,因此没有自定义组件的概念,你无须关心小程序自定义组件样式的问题

样式补全

Remax 没有对样式做补全,在上传代码时,记得开启小程序 样式补全 选项