How to import the .js file in .scss file

Question

I am doing white label angular web application. Is it possible to import my config.js file in header.scss file?

I tried to import it like this in my header.scss file:

@import '../../mixins.scss';
@import { themeColor } '../../config';

header{background-color: themeColor.backgroundColor; color:themeColor.color}

My config file:

export const themeColor = (buttonColor, textColor) =>({
    backgroundColor: buttonColor,
    color:textColor
})

However, I'm getting an error. How do I import it correctly?

Answer 1

You can do it with node-sass-json-importer.

It's an old library but it's 2023 and I keep importing js variables into my sass files with this tool. I do it with nextjs and vite projects.

My vite config file:

import jsonImporter from "node-sass-json-importer"
...

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        importer: jsonImporter(),
      }
    }
  },
  ...
})

My nextjs config file:

import jsonImporter from "node-sass-json-importer"
...

const baseConfig = {
  sassOptions: {
    importer: jsonImporter(),
  },
  ...
}

...

Answer 2

No. Sass has no mechanism for handling JavaScript code.