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

Posted 2023-02-22

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

【英文标题】：How to import a color variable from env in a scss file on Nuxt

【发布时间】：2021-06-07 17:38:48

【问题描述】：

我在 Nuxt 2.13 并使用 sass-loader 8.0.2

我想从我的 .env 文件中的 colors.scss 中导入一组颜色

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

我的 .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);

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

【参考方案1】：

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

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

对于 sass-loader

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 文件中。