Rollup not allowing SASS variables - rollup

Question

I'm trying to setup a SASS structure in my Rollup config that would allow me to use variables throughout the application. I'd like to use postcss + autoprefixer. I've setup the following in my plugins array:
postcss({
modules: false,
extensions: ['.css', '.sass', '.scss'],
output: false,
extract: true,
plugins: [autoprefixer],
use: [
[
'sass', {
includePaths: [path.join(__dirname, 'scss')]
}
]
]
})
That works well, I'm able to import my SCSS files within my components ie. import "./App.scss";.
The problem I'm facing is I have a number of global variables declared in App.scss and I'd like to use those variables in components that are imported in children.
How would I go about doing that? I thought this plugin would resolve all the SCSS, concat then run postcss + SASS against it, but seems like that's not the case.

Answer 1

Adding my github comment here:
https://github.com/sveltejs/language-tools/issues/232#issuecomment-801549706
This worked for me:
svelte.config.js
module.exports = {
preprocess: autoPreprocess({
scss: { prependData: `#import 'src/styles/main.scss';`},
postcss: { plugins: [require('autoprefixer')] }
}),
#};
rollup.config.js
svelte({
dev: !production, // run-time checks
// Extract component CSS — better performance
css: css => css.write(`bundle.css`),
hot: isNollup,
preprocess: [
autoPreprocess({
scss: { prependData: `#import 'src/styles/main.scss';`},
postcss: { plugins: [postcssImport()] },
defaults: { style: 'postcss' }
})
]
}),
App.svelte
<style global lang="scss">
</style>
If you want the errors in terminal to go away on rollup.config.js
svelte({
dev: !production, // run-time checks
// Extract component CSS — better performance
css: css => css.write(`bundle.css`),
hot: isNollup,
preprocess: [
autoPreprocess({
scss: { prependData: `#import 'src/styles/main.scss';`},
postcss: { plugins: [postcssImport()] },
defaults: { style: 'postcss' }
})
],
onwarn: (warning, handler) => {
const { code, frame } = warning;
if (code === "css-unused-selector")
return;
handler(warning);
}
}),
The coolest thing is my main.scss file can import partials.
#import 'resets';
#import 'border_box';
#import 'colors';
#import 'fonts';
#import 'forms';
Documentation here: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md