How to use with Svelte + Vite? #563

F1LT3R · 2024-06-12T09:27:46Z

F1LT3R
Jun 12, 2024

In the Pico documentation it says to use the following customization:

/* Custom Class-less version for React */
@use "@picocss/pico/scss/pico" with (
  
  // Define the root element used to target <header>, <main>, <footer>
  // with $enable-semantic-container and $enable-responsive-spacings
  $semantic-root-element: "#root";
  
  // Enable <header>, <main>, <footer> inside $semantic-root-element as containers
  $enable-semantic-container: true;

  // Enable .classes
  $enable-classes: false;
)

But when I add this to app.scss in a normal Svelte + Vite + SASS setup, I get this error:

[plugin:vite:css] [sass] expected ")".
  ╷
6 │   $semantic-root-element: "#root";
  │                                  ^
  ╵
  src/app.scss 6:34  root stylesheet
/home/user/repos/svelte-test/my-svelte-picco-app1/src/app.scss:6:34
    at Object.wrapException (/home/user/repos/svelte-test/my-svelte-picco-app1/node_modules/sass/sass.dart.js:2161:43)
    at SpanScanner.error$3$length$position (/home/user/repos/svelte-test/my-svelte-picco-app1/node_modules/sass/sass.dart.js:79676:15)
    at SpanScanner._fail$1 (/home/user/repos/svelte-test/my-svelte-picco-app1/node_modules/sass/sass.dart.js:79815:12)
    at SpanScanner.expectChar$2$name (/home/user/repos/svelte-test/my-svelte-picco-app1/node_modules/sass/sass.dart.js:79757:12)
    at SpanScanner.expectChar$1 (/home/user/repos/svelte-test/my-svelte-picco-app1/node_modules/sass/sass.dart.js:79760:19)
    at ScssParser0._stylesheet0$_configuration$1$allowGuarded (/home/user/repos/svelte-test/my-svelte-picco-app1/node_modules/sass/sass.dart.js:112111:10)
    at ScssParser0._stylesheet0$_configuration$0 (/home/user/repos/svelte-test/my-svelte-picco-app1/node_modules/sass/sass.dart.js:112115:19)
    at ScssParser0.atRule$2$root (/home/user/repos/svelte-test/my-svelte-picco-app1/node_modules/sass/sass.dart.js:111316:33)
    at ScssParser0._stylesheet0$_statement$1$root (/home/user/repos/svelte-test/my-svelte-picco-app1/node_modules/sass/sass.dart.js:110924:22)
    at StylesheetParser_parse__closure1.call$0 (/home/user/repos/svelte-test/my-svelte-picco-app1/node_modules/sass/sass.dart.js:114165:17
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

And I see that same error hovering in VS Code.

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="color-scheme" content="light dark" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="@pico/picocss/css/pico.fluid.classless.min.css" />
    <title>Vite + Svelte + Pico</title>
  </head>
  <body id="root">
    <script type="module" src="/src/main.mjs"></script>
  </body>
</html>

App.svelte

<script>
  import '@picocss/pico'
  import './app.scss'
</script>
 
<header>
</header>

<main>
  <h1>Hello world!</h1>
  <form>
    <fieldset>
      <label>
        First name
        <input
          name="first_name"
          placeholder="First name"
          autocomplete="given-name"
        />
      </label>
      <label>
        Email
        <input
          type="email"
          name="email"
          placeholder="Email"
          autocomplete="email"
        />
      </label>
    </fieldset>
  
    <input
      type="submit"
      value="Subscribe"
    />
  </form>
</main>

<footer>
</footer>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use with Svelte + Vite? #563

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

How to use with Svelte + Vite? #563

F1LT3R Jun 12, 2024

Replies: 0 comments

F1LT3R
Jun 12, 2024