VS Code warning about unused CSS selectors in SvelteKit

Question

VS Code warning about unused CSS selectors in SvelteKit

Is there a way to get rid of the Unused CSS selector warning in VS Code? I keep getting this warning in all files where I use

<style lang="scss">

. While I'm aware that I don't use the .btn class in some components, I still want it as a global CSS rule.

https://i.sstatic.net/YX2Dd.png

This is what my svelte.config.js looks like:

const config = {
    onwarn: (warning, handler) => {
        const { code, frame } = warning;
        if (code === "css-unused-selector")
                return;

        handler(warning);
    },
    preprocess: [
        preprocess({
            defaults: {
                style: 'scss'
            },
            postcss: true,
            scss: {
                prependData: `@import 'src/scss/global.scss';`
            }
        })
    ],
};

I would appreciate any help with this issue. Can someone assist me?

css visual-studio-code sass svelte sveltekit

Answer 1

Answer №1

When using prependData, you are essentially adding the import to every component where styles are used. This may not be the desired outcome, so it's best to remove this setting. Instead, you should aim to import the file once so that it is available globally. You can achieve this by importing it within the script tag in your root file, allowing SvelteKit (or Vite) to handle style imports effectively.

To implement this, simply include the following code snippet inside your root __layout.svelte file:

<script>
  import 'path/to/your/global.scss';
</script>

Answer 2

When using prependData, you are essentially adding the import to every component where styles are used. This may not be the desired outcome, so it's best to remove this setting. Instead, you should aim to import the file once so that it is available globally. You can achieve this by importing it within the script tag in your root file, allowing SvelteKit (or Vite) to handle style imports effectively.

To implement this, simply include the following code snippet inside your root __layout.svelte file:

<script>
  import 'path/to/your/global.scss';
</script>

VS Code warning about unused CSS selectors in SvelteKit

Answer №1

Similar questions

Having difficulty reaching a div element using either its id or class in a CSS stylesheet

What is the best way to customize the size of a file upload Buefy component to have both a specific

Automatically resize and vertically align a centrally positioned div in a designated container

The Javascript navigation bar is not displaying properly on mobile devices as it should

What could be causing my getAsFile() method to return null?

FlexNav excluding

Is there a way to hide an HTML element from view while still allowing it to be found by the browser?

Display radio buttons depending on the selections made in the dropdown menu

The Bootstrap Grid Leaves Blank Spaces Unfilled

Determine the amount of unused vertical space within a block of text

How to achieve a Dropbox-inspired footer effect using CSS?

Enlarge the image to fill the entire screen

Creating a thumbnail with a close button using an image

Expanding columns to reach the full height of the page

Center the font in the middle of the text field

Gradient background overlaid with a blended SVG shape

Can a linked checkbox be created?

Troubleshooting: Why isn't my CSS fixed position working for my sticky

Nested divs with overlapping background images

Challenges with Table and <p> Spacing in HTML and CSS