How to import a color variable from env in a scss file on Nuxt

Question

I'm on Nuxt 2.13 and using sass-loader 8.0.2

I wanna import a set of colors from my .env file in colors.scss

I managed to import them and allocate to variables with these codes:

my .env file:

THEME_BODY_COLOR = #FAFAFA
THEME_MAIN_COLOR = #0D2C54
THEME_MAIN_COLOR2 = #ff3366
THEME_SIDE_COLOR = #1a1b41
THEME_SIDE_COLOR2 = #0D2C54
THEME_LINK_COLOR = #673ab7

my nuxt.config.js

build: {
    transpile: ['vee-validate/dist/rules'],
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        jQuery: "jquery",
        "window.jQuery": "jquery",
        '_': 'lodash'
      }),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ],
    postcss: {
      preset: {
        features: {
          customProperties: false,
        },
      },
    },
    loaders: {
      scss: {
        prependData: `$theme_colors: ("theme_body_color":"${process.env.THEME_BODY_COLOR}","theme_main_color":"${process.env.THEME_MAIN_COLOR}","theme_main_color2":"${process.env.THEME_MAIN_COLOR2}","theme_side_color":"${process.env.THEME_SIDE_COLOR}","theme_side_color2":"${process.env.THEME_SIDE_COLOR2}","theme_link_color":"${process.env.THEME_LINK_COLOR}");`
      }
    },
  }

my colors.scss file:

@use "sass:string";
$theme_body_color: unquote(map-get($theme_colors, "theme_body_color"));
$theme_main_color: unquote(map-get($theme_colors, "theme_main_color"));
$theme_main_color2: unquote(map-get($theme_colors, "theme_main_color2"));
$theme_side_color: unquote(map-get($theme_colors, "theme_side_color"));
$theme_side_color2: unquote(map-get($theme_colors, "theme_side_color2"));
$theme_link_color: unquote(map-get($theme_colors, "theme_link_color"));

It has no problem with color: $theme_link_color but color: rgba($theme_link_color, .9) gives me the following error :

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                            friendly-errors 22:47:11
SassError: argument `$color` of `rgba($color, $alpha)` must be a color
        on line 18 of assets/scss/colors.scss, in function `rgba`
        from line 18 of assets/scss/colors.scss
        from line 125 of C:\CODES\myproject\components\global\mycomp.vue
>> @debug rgba($theme_link_color, 0.2);

what cause this problem and how can i solve that??

Answer 1

It took me a while to find the answer and the problem was my approach!!

I didn't know how to insert multiple variable so I created an array and that caused the problem. so the answer:

for sass-loader < 7.x

build: {
    loaders: {
      scss: {
        data: `
          $theme_body_color:${process.env.THEME_BODY_COLOR};
          $theme_main_color:${process.env.THEME_MAIN_COLOR};
          $theme_main_color2:${process.env.THEME_MAIN_COLOR2};
          $theme_side_color:${process.env.THEME_SIDE_COLOR};
          $theme_side_color2:${process.env.THEME_SIDE_COLOR2};
          $theme_link_color:${process.env.THEME_LINK_COLOR};
        `
      }
    },
  }

for sass-loader 8.x

build: {
    loaders: {
      scss: {
        prependData: `
          $theme_body_color:${process.env.THEME_BODY_COLOR};
          $theme_main_color:${process.env.THEME_MAIN_COLOR};
          $theme_main_color2:${process.env.THEME_MAIN_COLOR2};
          $theme_side_color:${process.env.THEME_SIDE_COLOR};
          $theme_side_color2:${process.env.THEME_SIDE_COLOR2};
          $theme_link_color:${process.env.THEME_LINK_COLOR};
        `
      }
    },
  }

for sass-loader > 9.x

build: {
    loaders: {
      scss: {
        additionalData: `
          $theme_body_color:${process.env.THEME_BODY_COLOR};
          $theme_main_color:${process.env.THEME_MAIN_COLOR};
          $theme_main_color2:${process.env.THEME_MAIN_COLOR2};
          $theme_side_color:${process.env.THEME_SIDE_COLOR};
          $theme_side_color2:${process.env.THEME_SIDE_COLOR2};
          $theme_link_color:${process.env.THEME_LINK_COLOR};
        `
      }
    },
  }

and that's it!! no need to do anything else! the variables are added to all scss files.