Question 250771 in CSS Question posted in
Some basic documentation can be found here.

In Sveltkit, how do i import SCSS variables into my JS?

Im trying to access my color pallete within the script tag of my component:

import pallete from "$src/style/pallete.scss";

but it is returning the export as a string:

:export {
  mainColor: #e8d44d;
  mainColorHover: #c0aa1d;
  mainColorContrast: #1e1e1e;
  mainContrastDark: #000000;
}

I know i need to add these webpack configurations as said in some articles that i read in my searching, like this one.

module.exports = {
 // ...
 module: {
  rules: [
   {
    test: /.scss$/,
    use: ["style-loader", "css-loader", "sass-loader"]
   },
   // ...
  ]
 }
};

but im fallowing the Sveltekit docs so i have no webpack.config.js or rollup.config.js

Your webpack.config.js or rollup.config.js should be replaced with a svelte.config.js, as documented here.

What should i do?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As unlocomqx said on Reddit, im now using vite-plugin-css-export


  2. 0

    It’s not response to your question, but I would recommend you different approach

    With pure css variables you can do almost everythng as with scss vars

    html {
  --mainColor: #e8d44d;
  --mainColorHover: #c0aa1d;
  --mainColorContrast: #1e1e1e;
  --mainContrastDark: #000000;
}

    And then read it with JS

    getComputedStyle(document.documentElement)
    .getPropertyValue('--mainColor')

    Only case you may need variables on SCSS level is when you use them as argument of SCSS functions. In such case you can still declare CSS variables based base on SCSS vars and get best of both approaches.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search