Global SCSS variables

[daarxwalker]

Hey guys,
have a one little problem. I tried to have global SCSS variables. Compilation works, but extension seems not. I get it, when importing nothing, it doesn't know about variables.
I added this to rollup.config.js as argument to autoPreprocess():

const autoPreprocessConfig = {
	scss: { includePaths: ['src/styles'], data: '@import "theme";' },
	postcss: {
		plugins: [ require('autoprefixer') ],
	},
}

In svelte.config.js doesn't work, so that's why rollup.config.js.
I have file _theme.scss in included path, as I said, compilation works.
But when I use variables like this:

<style type="text/scss">
    .test {
        color: $color-primary;
    }
</style>

..it shows at the beggining of component this

The file cannot be parsed because script or style require a preprocessor that doesn't seem to be setup.
Did you setup a `svelte.config.js`?
See https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#using-with-preprocessors for more info.

[dummdidumm]

Does the error occur only when using global variables, or always? If always, did you follow the instructions for SCSS? Especially the last point (setting node path) might be what you need to do.

[daarxwalker]

You mean this, right? I did it on the start of svelting.
Ad.: Only global SCSS variables

[daarxwalker]

Really dunno what to do. Any idea?

[daarxwalker]

Need something like global reference to variables, so extension will know about it + autocompleting.

[dummdidumm]

You need to have the same preprocessor config setup in your svelte.config.js as in your rollup.config.js.

[daarxwalker]

I did it. Still same warning. Same preprocess config in svelte.config.js && rollup.config.js (client && server)

[daarxwalker]

Restarted lang-server, restarted vscode, nothing changed, still warning in componen.

[daarxwalker]

Looks like the component can't reach variable.

[blindfish3]

@daarxwalker - IIRC includePaths does not by definition make the variables available within all your SCSS code. It just provides SCSS specific paths from which imports can be resolved - e.g. to avoid having to hard-code full paths. So for example you might include 'node_modules' if you know you have dependencies there...

So I think you still need an @import for your dependencies inside your component <style> tag. I don't have time to confirm in docs yet; but that's what I'd check first ;)

[daarxwalker]

I know. I tried without data and import, still same message. But it's really pretty bad, if I can't just inject variables to all components in one place. I can live with @import 'theme'; in all components, but it still doesn't work.

[dummdidumm]

If your build runs fine, this is "just" an IDE intellisense error which we have to fix. So you can continue programming and ignore the error until we have come up with a solution.

[daarxwalker]

I know, i know. But it's really annoying and I don't know, if I don't have to do something more in configs. Thanks anyway for guides.

[dummdidumm]

I cannot reproduce this.

This is what I did:

1. use svelte starter template
2. npm i --D svelte-preprocess sass (note: not node-sass, to get around the annoying node environment thing)
3. add theme.sccs inside src, content $bla: blue;
4. enhance rollup to deal with it
5. create svelte.config.js with this:

import autoPreprocess from 'svelte-preprocess';

export const preprocess = autoPreprocess({
  includePaths: ['src'],
});

6. add lang="scss" to style tag in App.svelte, add @import './theme'; at the top and background: $bla; to main styling.

[daarxwalker]

@dummdidumm

• I'm using Sapper with TypeScript.

• yarn add -D sass

• src/styles/_theme.scss
  

• rollup.config.js
  
  

• svelte.config.js same as rollup.config.js
  

• component
  

[dummdidumm]

You cannot use the new syntax inside the svelte.config.js. You need to write it like this:

const autoPreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: autoPreprocess({
    scss: { includePaths: ['src/styles'], data: '@import "theme";' },
    postcss: { plugins: [require('autoprefixer')] }
  }),
};

This worked for me.

[blindfish3]

@daarxwalker

• component
  

You still don't have an @import statement here

[daarxwalker]

@dummdidumm You're right about svelte.config.js, warning disappear. What about autocomplete, still not working. Really need to have manual @import "theme"; in every component or it's in data prop just fine and problem with autocomplete is somewhere else?

@blindfish3 I know. I want it global. It's standard thing with SCSS.

[dummdidumm]

Since the error went away I'm going to close this.

Autocomplete is not supported yet, please open another feature request for this.

[krisalcordo]

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

[babakfp]

Hi
I'm having a great day, working with Svelte

@kjaonline