@tarojs/rn-style-transformer NPM

@tarojs/rn-style-transformer

用于处理 rn 样式配置，生成需要的样式

postcss 相关配置，其他样式语言预处理后经过此配置。

module.exports = {
  // ...
  rn: {
    // ...
    postcss: {
      // postcss 配置，参考 https://github.com/postcss/postcss#options
      options: {
        /* ... */
      },
      // 默认true，控制是否对 css value 进行 scalePx2dp 转换，pxtransform配置 enable 才生效
      scalable: boolean,
      pxtransform: {
        enable: boolean, // 默认true
        config: {
          /* ... */
        }, // 插件 pxtransform 配置项，参考尺寸章节
      },
      // 跟其他端 css module 配置保持统一
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
      },
      // postcss-css-variables 配置，样式变量编译相关
      'postcss-css-variables': {
        enable: boolean, // 默认 true
        config: {
          /* ... */
        }, // 插件 postcss-css-variables 配置项，参考 https://github.com/MadLittleMods/postcss-css-variables?tab=readme-ov-file#options
      },
    },
  },
}

sass 相关配置。options 配置项参考官方文档。

module.exports = {
  // ...
  rn: {
    // ...
    sass: {
      options: {
        /* ... */
      },
      // 加入到脚本注入的每个 sass 文件头部，在 config.sass 之前
      additionalData: '', // {String|Function}
    },
  },
}

less 相关配置。options 配置项参考官方文档。

module.exports = {
  // ...
  rn: {
    // ...
    less: {
      options: {
        /* ... */
      },
      additionalData: '', // {String|Function}
    },
  },
}

stylus 相关配置。options 配置项如下。

module.exports = {
  // ...
  rn: {
    // ...
    stylus: {
      options: {
        /**
         * Specify Stylus plugins to use.
         *
         * @type {(string|Function)[]}
         * @default []
         */
        use: ['nib'],

        /**
         * Add path(s) to the import lookup paths.
         *
         * @type {string[]}
         * @default []
         */
        include: [path.join(__dirname, 'src/styl/config')],

        /**
         * Import the specified Stylus files/paths.
         *
         * @type {string[]}
         * @default []
         */
        import: ['nib', path.join(__dirname, 'src/styl/mixins')],

        /**
         * Define Stylus variables or functions.
         *
         * @type {Array|Object}
         * @default {}
         */
        // Array is the recommended syntax: [key, value, raw]
        define: [
          ['$development', process.env.NODE_ENV === 'development'],
          ['rawVar', 42, true],
        ],
        // Object is deprecated syntax (there is no possibility to specify "raw')
        // define: {
        //   $development: process.env.NODE_ENV === 'development',
        //   rawVar: 42,
        // },

        /**
         * Include regular CSS on @import.
         *
         * @type {boolean}
         * @default false
         */
        includeCSS: false,

        /**
         * Emits comments in the generated CSS indicating the corresponding Stylus line.
         *
         * @see https://stylus-lang.com/docs/executable.html
         *
         * @type {boolean}
         * @default false
         */
        lineNumbers: true,

        /**
         * Move @import and @charset to the top.
         *
         * @see https://stylus-lang.com/docs/executable.html
         *
         * @type {boolean}
         * @default false
         */
        hoistAtrules: true,
      },
      additionalData: '', // {String|Function}
    },
  },
}

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

2 months ago

3 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

4 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

2 months ago

4 months ago

2 months ago

2 months ago

5 months ago

4 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

10 months ago

11 months ago

9 months ago

12 months ago

12 months ago

11 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

9 months ago

9 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

10 months ago

12 months ago

12 months ago

12 months ago

9 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

@tarojs/rn-style-transformer

rn.postcss

rn.sass

rn.less

rn.stylus