Migration Guide
Here you may find guidance on upgrading Attractions from one major version to another.
From v2.x to v3.x
The main change in version 3 is the migration to Sass modules.
If you have existing code that used Sass for styling and was using the old @import
statements, consider using the automatic Sass Migrator tool first.
Heads up: if your styles used imports that relied on includePaths
, you can still make Sass Migrator understand them by setting the SASS_PATH
environment variable to the path that you previously had in your includePaths
Sass compiler option.
Once your code is ready for Sass modules, replace Node Sass (node-sass
) with Dart Sass (sass
).
Update your rollup.config.js
to use the new Attractions importers:
import autoPreprocess from 'svelte-preprocess';
import makeAttractionsImporter from 'attractions/importer.js';
const preprocessChain = [
autoPreprocess({
scss: {
importer: makeAttractionsImporter({
// If you previously had a file that was overriding Attractions variables,
// provide the path to it here.
// If it was empty, you may delete it, omit this parameter
// and call the function with no arguments.
themeFile: './static/css/_attractions-theme.scss',
}),
includePaths: ['./static/css'],
},
}),
];
Lastly, if your _attractions-theme.scss
had any variable overrides, move them to the module configuration.
Before:
@import '_attractions-theme.scss';
$font: 'Open Sans', sans-serif;
$main: green;
$my-custom-variable: 1px;
After:
@forward "~attractions/_variables" with (
$font: ('Open Sans', sans-serif),
$main: green;
);
$my-custom-variable: 1px;