如何在 Nuxt 上的 scss 文件中从 env 导入颜色变量

Question

我在 Nuxt 2.13 上使用 sass-loader 8.0.2

我想从 colors.scss

中的 .env 文件中导入一组颜色

我设法导入它们并使用这些代码分配给变量：

我的 .env 文件：

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

我的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}");`
      }
    },
  }

我的colors.scss文件：

@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"));

color: $theme_link_color 没有问题，但是 color: rgba($theme_link_color, .9) 给我以下错误：

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);

是什么原因导致这个问题，我该如何解决？

Answer 1

我花了一段时间才找到答案，问题是我的方法！！

我不知道如何插入多个变量，所以我创建了一个数组，这导致了问题。所以答案：

对于 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};
        `
      }
    },
  }

对于 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};
        `
      }
    },
  }

对于 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};
        `
      }
    },
  }

就是这样！！无需做任何其他事情！变量被添加到所有 scss 文件中。

如何在 Nuxt 上的 scss 文件中从 env 导入颜色变量

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

vue.js

sass

nuxt.js

sass-loader