無法使用 node_modules 中 scss 文件中的 css 變量

Question

我想使用 node_modules 中已安裝模塊的 scss 文件中的 css 變量。

node_modules 文件夾：

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

變量.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 function 的變量。 我做錯了 CSS 裝載機配置嗎？

Answer 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>