Can't override sass variables

[sallaben]

Hello, thanks for releasing 3.0.0 alongside a migration guide! Unfortunately I ran into an issue with variable overrides and I'm not sure if I'm doing it right.

./public/theme.scss

@forward '~attractions/_variables' with (
  $main: green,
);

./svelte.config.js

const makeAttractionsImporter = require('attractions/importer.js');
const sveltePreprocess = require('svelte-preprocess');
const path = require('path');

module.exports = {
  preprocess: [
    sveltePreprocess({
      scss: {
        importer: makeAttractionsImporter({
          themeFile: path.join(__dirname, 'public/theme.scss'),
        }),
        includePaths: [path.join(__dirname, 'public')],
      },
    }),
  ],
};

package.json includes

• sass@1.32.6
• attractions@3.1.0

as you can see, I'm not deviating from the docs too much -- but my elements are still colored the default #4300B0, not green. Any ideas what I'm doing wrong? Thanks again!

[illright]

Just to make sure: you do use svelte.config.js in rollup.config.js, right? :)

It requires an explicit import and a spread of the imported object into the svelte() Rollup plugin.

[illright]

There is a little mistake in the docs, for some reason you should take care to use a CommonJS-import in rollup.config.js instead of import:

+ const svelteConfig = require('./svelte.config.js');
// ...
export default {
  // ...
  plugins: [
    // ...
    svelte({
+      ...svelteConfig,
      // ...
    }),
    // ...
  ],
}

But other than that, I followed these steps and got the working customized installation:

• degit the Svelte template
• pnpm add -D attractions sass svelte-preprocess postcss
• created ./public/theme.scss with the contents you provided
• created ./svelte.config.js with the contents you provided
• added the CommonJS-import of svelte.config.js to rollup.config.js as shown above
• imported and used a button in ./src/App.svelte

[sallaben]

Thank you for the docs update and verbose walkthrough! That's really interesting - commonjs over import statement. Consider my problem resolved based on the info in your last message.