Search code examples
javascriptcsssasssveltesveltekit

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?

Solution

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