How to use svelte-preprocess - 9 common examples

runtimeHelpers: true,
    }),
    svelte({
      // 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: css => {
        css.write('public/bundle.css');
      },

      /**
       * Auto preprocess supported languages with
       * '<template>'/'external src files' support
       **/
      preprocess: autoPreprocess({
        postcss: true,
        scss: { includePaths: ['src', 'node_modules'] },
      }),
    }),

    // 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/rollup-plugin-commonjs
    resolve({
      browser: true,
      dedupe: importee =&gt;
        importee === 'svelte' || importee.startsWith('svelte/'),
    }),
    commonjs({</template>

sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/bundle.js'
  },
  plugins: [
    svelte({
      // 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: css => {
        css.write('public/bundle.css');
      },
      
      preprocess: autoPreprocess()
    }),
    
    // 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/rollup-plugin-commonjs
    resolve({
      browser: true,
      dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
    }),
    commonjs(),

    replace({
      'process.env': JSON.stringify(process.env)
    }),

import postcss from 'rollup-plugin-postcss';
import autoPreprocess from 'svelte-preprocess';

const production = !process.env.ROLLUP_WATCH;

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/bundle.js'
  },
  plugins: [
    svelte({
      preprocess: autoPreprocess({
        postcss: true
      }),
      // enable run-time checks when not in production
      dev: !production,
      css: css => {
        css.write('public/components.css');
      }
    }),
    postcss({
      extract: 'public/utils.css'
    }),

    // 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:

import replace from 'rollup-plugin-replace';
import svelte from 'rollup-plugin-svelte';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup';
import sveltePreprocess from 'svelte-preprocess';
import pkg from './package.json';

const mode = process.env.NODE_ENV;
const dev = mode === 'development';

const extensions = ['.mjs', '.js', '.svelte', '.css'];
const aliases = alias({
  resolve: extensions.reduce((acc, ext) => [...acc, ext, `/index${ext}`], []),
  '@': path.resolve(__dirname, 'src'),
});
const preprocess = sveltePreprocess({ postcss: true });

// eslint-disable-next-line no-shadow
const onwarn = (warning, onwarn) =>
  (warning.code === 'CIRCULAR_DEPENDENCY' &&
    warning.message.includes('/@sapper/')) ||
  onwarn(warning);

export default {
  client: {
    input: config.client.input(),
    output: config.client.output(),
    plugins: [
      aliases,
      replace({
        'process.browser': true,
        'process.env.NODE_ENV': JSON.stringify(mode),

runtimeHelpers: true,
		}),
		svelte({
			// 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: (css) => {
				css.write('public/bundle.css');
			},

			/**
			 * Auto preprocess supported languages with
			 * '<template>'/'external src files' support
			 **/
			preprocess: autoPreprocess({
				postcss: true,
				scss: { includePaths: ['src', 'node_modules'] },
			}),
		}),

		// 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/rollup-plugin-commonjs
		resolve({
			browser: true,
			dedupe: (importee) =&gt;
				importee === 'svelte' || importee.startsWith('svelte/'),
		}),
		commonjs({</template>

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 dotenv from 'dotenv'
import pkg from './package.json'
import autoPreprocess from 'svelte-preprocess'

const env = dotenv.config().parsed

const envKeys = Object.keys(env).reduce((prev, next) => {
  prev[`process.env.${next}`] = JSON.stringify(env[next])
  return prev
}, {})

const preprocess = autoPreprocess({
  transformers: {
    scss: { sourceMap: false },
    postcss: {
      plugins: [
        require('postcss-import'),
        require('postcss-preset-env')({
          stage: 3,
          preserve: false,
          // features: {
          //   'nesting-rules': true,
          //   'custom-media-queries': true,
          //   'custom-selectors': true,
          //   'color-mod-function': {
          //     unresolved: 'warn',
          //   },
          // },

import commonjs from "rollup-plugin-commonjs"
import resolve from "rollup-plugin-node-resolve"
import serve from "rollup-plugin-serve"
import html from "rollup-plugin-bundle-html"
import css from "rollup-plugin-css-porter"
import typescript from "rollup-plugin-typescript2"
import typescriptCompiler from "typescript"
import { terser } from "rollup-plugin-terser"
import livereload from "rollup-plugin-livereload"
import sveltePreprocessor from "svelte-preprocess"

const plugins = [
  svelte({
    dev: process.env.NODE_ENV === "development",
    extensions: [".svelte"],
    preprocess: sveltePreprocessor(),
  }),
  html({
    template: "src/index.html",
    dest: "dist",
    filename: "index.html"
  }),
  css({
    dest: 'dist/index.css',
    raw: false
  }),
  typescript({ typescript: typescriptCompiler }),
  commonjs({ include: "node_modules/**" }),
  resolve()
];
if (process.env.NODE_ENV === "development") {
  plugins.push(

output: [
        {
          file: 'dist/js/shepherd.min.js',
          format: 'umd',
          name: 'Shepherd',
          sourcemap: true
        },
        {
          file: 'dist/js/shepherd.esm.min.js',
          format: 'esm',
          sourcemap: true
        }
      ],
      plugins: [
        svelte({
          preprocess: sveltePreprocess(),
          emitCss: true
        }),
        resolve({
          extensions: ['.js', '.json', '.svelte']
        }),
        commonjs(),
        replace({
          'process.env.NODE_ENV': JSON.stringify(env)
        }),
        babel({
          extensions: ['.js', '.mjs', '.html', '.svelte']
        }),
        postcss({
          plugins: [
            require('autoprefixer'),
            require('cssnano')

browser: true,
    }),
    terser(),
  ],
}) : ({
  input: 'example/index.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/bundle.js',
  },
  plugins: [
    svelte({
      dev: !production,
      preprocess: preprocess(preprocessOptions),
      css: css => css.write('public/bundle.css'),
    }),
    resolve(),
    commonjs(),
    livereload('public'),
  ],
});

export default config;