How to use svelte-preprocess-sass - 4 common examples

},
  plugins: [
    url({
      limit: 3 * 1024
    }),
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      immutable: true,
      // we'll extract any component CSS out into
      // a separate file — better for performance
      css: css => {
        css.write(`${distDir}/bundle.css`, !production);
      },
      preprocess: {
        style: sass({
          includePaths: [
            'src/style',
            'node_modules'
          ]
        }, { name: 'scss' }),
        script: scriptProcessor([
          classProcessor(),
          emitProcessor()
        ])
      }
    }),

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

historyApiFallback: true,
      port: 5100,
      verbose: 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');
      },

      preprocess: {
        style: sass(),
      },

      // enable https://svelte.technology/guide#state-management
      store: true,

      // this results in smaller CSS files
      cascade: false,
    }),

    // 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(),
    commonjs(),

{
                    test: /\.(html|svelte)$/,
                    exclude: [
                        /main\.html/
                    ],
                    use: {
                        loader: 'svelte-loader',
                        options: {
                            skipIntroByDefault: true,
                            nestedTransitions: true,
                            emitCss: true,
                            hotReload: true,

                            // Preprocess SASS/SCSS
                            preprocess: {
                                style: sass({}, {name: 'scss'})
                            }
                        }
                    }
                },
                {
                    test: /\.css$/,
                    use: [
                        // MiniCssExtractPlugin doesn't support HMR.
                        // For developing, use 'style-loader' instead
                        prod ? MiniCssExtractPlugin.loader : 'style-loader',
                        'css-loader'
                    ]
                },
                {
                    test: /\.scss$/,
                    use: [

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 {sass} from 'svelte-preprocess-sass';
import pkg from './package.json';

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

const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning);
const dedupe = importee => importee === 'svelte' || importee.startsWith('svelte/');

const preprocess = {
  style: sass({includePaths: ['src', 'node_modules']}, {name: 'scss'})
}

export default {
  client: {
    input: config.client.input(),
    output: config.client.output(),
    plugins: [
      replace({
        'process.browser': true,
        'process.env.NODE_ENV': JSON.stringify(mode)
      }),
      svelte({
        dev,
        hydratable: true,
        emitCss: true,
        preprocess,