svelte项目rollup配置px2rem

最新推荐文章于 2025-11-25 02:39:08 发布

原创

最新推荐文章于 2025-11-25 02:39:08 发布 · 704 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#postcss #less

本文介绍了在Svelte项目中如何通过Rollup配置，结合postcss插件将px单位转换为rem。在尝试了多种方法未果后，作者找到了一个成功的解决方案，并分享了完整的rollup配置文件，特别指出此配置适用于Sapper项目。配置完成后，还需要相应地调整CSS代码。

使用svelte开发项目时遇到需要将px转换成rem的需求，有试过postcss-px2rem，postcss-pxtorem，等postcss插件，都没成成功，最后找到了postcss-units插件成功实现。
完整rollup配置文件如下：
converts px to rem
该配置是sapper项目配置

import path from 'path';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import commonjs from '@rollup/plugin-commonjs';
import url from '@rollup/plugin-url';
import svelte from 'rollup-plugin-svelte';
import babel from '@rollup/plugin-babel';
import {
   
    terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';
import sveltePreprocess from 'svelte-preprocess';
// import { less } from 'svelte-preprocess';
const postcssUnits = require('postcss-units');

const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;

const onwarn = (warning, onwarn) =>
	(warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
	(warning.code

最低0.47元/天解锁文章