无法在 node_modules 中使用 scss 文件中的 css 变量答案

【问题标题】：Can't use a css variable from scss file in node_modules无法在 node_modules 中使用 scss 文件中的 css 变量
【发布时间】：2022-01-07 07:46:22
【问题描述】：

我想使用 node_modules 中已安装模块的 scss 文件中的 css 变量。

node_modules 文件夹：

     |node_modules
      - A
      -- A1
      --- variable.scss

varibale.scss：

$include-html-classes: false;
$include-html-global-classes: false;

@import "~foundation-sites/scss/foundation/components/_global.scss";
$default-color-white: #fff;
$color-white: var(--a-palette-complementary-0, $default-color-white);

webpack.config.js

{
                    test: /\.scss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                hmr: isDevelopment
                            }
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: [
                                    require('autoprefixer')()
                                ],
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sassOptions: {
                                    includePaths: [
                                        path.resolve(__dirname, 'node_modules'),
                                        path.resolve(__dirname, 'node_modules/foundation-sites/scss')
                                    ]
                                },
                                sourceMap: true
                            }
                        }
                    ]
                },

                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                hmr: isDevelopment
                            }
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                    ]
                },

我得到一个编译错误：

SassError: argument `$color` of `transparentize($color, $amount)` must be a color

但如果我尝试使用变量 $default-color-white 而不是 $color-white 则编译成功

我的 scss 文件：

@import "~A/A1/variable";
.import-section {
    border: 1px solid transparentize($color-white, 0.5); // compile error 
}

@import "~A/A1/variable";
    .import-section {
        border: 1px solid transparentize($default-color-white, 0.5); // compile OK 
    }

我不知道为什么我不能使用使用 var 函数的变量。我做错了 CSS 加载器配置吗？

【问题讨论】：

标签： css sass webpack-4

【解决方案1】：

CSS 变量在运行时是动态的，SASS 在编译时无法对其进行转换。

SASS 编译器将其拾取为：

border: 1px solid transparentize(var(--a-palette-complementary-0, #fff), 0.5);

SASS 无法修改该变量，因为它不是颜色，它只是一个变量，一旦浏览器开始呈现页面，它就可以是任何东西。

使用 CSS 变量的一个缺点是您无法在编译时或运行时动态更改颜色透明度。但是，可以通过使用 RGB 值创建变量，然后基于该值创建其他颜色变量来做到这一点：

:root {
  --foo-rgb: 255, 0, 0;
  --foo: rgb(var(--foo-rgb, #f00));
  --foo-50: rgba(var(--foo-rgb), 0.5);
}

.block {
  width: 100px;
  height: 100px;
}

.foo {
  background: var(--foo);
}

.foo-50 {
  background: var(--foo-50);
}

<div class="block foo"></div>
<div class="block foo-50"></div>

【讨论】：