如何使用 SvelteKit 启用 JS 和 SCSS 源映射？

Question

我已经在本地建立了一个支持 scss 的 sveltekit 项目。但所有生成的 JS 和 CSS 都是内联的。

如何在开发时生成bundle.js和使用源映射？bundle.css

svelte.config.js ( SvelteKit v1.0.0-next.144 )

import preprocess from 'svelte-preprocess';

const production = !process.env.ROLLUP_WATCH;

const config = {
    kit: {
        target: '#svelte'
    },
    preprocess: preprocess({
        scss: {
            includePaths: ['src'],
            prependData: `@import 'src/style/_config.scss';`
        },
        sourceMap: true,
    }),
    compilerOptions: {
        dev: !production
    }
};

export default config;

Answer 1

根据vite-plugin-svelte 常见问题解答，应使用 JavaScript 导入全局样式，以缩短开发启动时间并利用 Vite 的样式处理。

就我而言，我将其添加到 __layout.svelte 文件上的脚本标记中：

import '../style/global.scss'

以前，我一直按照他们明确规定不要这样做的方式导入它。;-)