Rollup not allowing SASS variables

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