scss를 사용하기 위한 sveltePreprocess() 실행 위치가?

rollup.config.js 파일에

preprocess: sveltePreprocess()를 실행하는 위치가 어떻게 되는지요? config.js 파일의 구조가 약간 달라졌습니다.

package.json 파일에서

@rollup/plugin-commonjs:^15.1.0

@rollup/plugin-node-resolve: ^9.0.0

추가로 설치된 node-sass: ^7.0.1

svelte-preprocess: ^4.10.7

rollup.config.js 파일에서

import svelte from 'rollup-plugin-svelte';

import commonjs from '@rollup/plugin-commonjs';

import resolve from '@rollup/plugin-node-resolve';

import livereload from 'rollup-plugin-livereload';

import { terser } from 'rollup-plugin-terser';

import css from 'rollup-plugin-css-only'; // 강의에는 없는 행

// svlete-preprocessor import 한다.

import sveltePreprocess from 'svelte-preprocess';

아래 plugins 블록에서는

강의에서와는 블록의 구조가 달라져 있습니다.

plugins: [

// 여기 블록의 구조가 달라 정확하게 어디에서 sveltePreporcess()를 실행해야

// 하는지요. 아래 기술된 위치에 넣으니까 중첩 스타일에서 오류가 발생합니다.

svelte({

compilerOptions: {

// enable run-time checks when not in production

dev: !production

}

}),

// we'll extract any component CSS out into

// a separate file - better for performance

css({ output: 'bundle.css' }),

sveltePreprocess(),

// scss를 추가하기 위해 여기서 실행... ???

// If you have external dependencies installed from

// npm, you'll most likely need these plugins. In

// some cases you'll need additional configuration -

// consult the documentation for details:

// https://github.com/rollup/plugins/tree/master/packages/commonjs

resolve({

browser: true,

dedupe: ['svelte']

}),

commonjs(),