Reactjs 如何编写允许覆盖scss变量的React组件库

我有几个react项目，它们共享的组件很少。 所以我想创建一个包含它们共享的组件的库

例如，我有一个

ActionButton

组件，如下所示：

import React from 'react';
import PropTypes from 'prop-types';
import './ActionButton.scss';

const ActionButton = ({ children }) => (
    <button className="action-button"> {children}</button>
 )

export default ActionButton;

在

variable.scss中

$primary: blue !default;

现在，我希望能够创建一个带有
操作按钮的库，该按钮能够更改
$primary
的值

Im使用
rollup
构建具有此配置的库：

import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import sass from 'rollup-plugin-sass';
import scssVariable from 'rollup-plugin-sass-variables'
import resolve from 'rollup-plugin-node-resolve'
import url from 'rollup-plugin-url'
import svgr from '@svgr/rollup'
import pkg from './package.json'

export default {
    input: 'src/index.js',
    treeshake: false,
    output: [
    {
       file: pkg.main,
       format: 'cjs',
       sourcemap: true
    },
    {
      file: pkg.module,
      format: 'es',
      sourcemap: true
    }
  ],
   plugins: [
     external(),
     postcss({
       modules: false,
       extract: true
     }),
     url(),
     svgr(),
     babel({
        exclude: 'node_modules/**',
        plugins: [ 'external-helpers' ]
     }),
     resolve({
       extensions: ['.js', '.jsx'],
     }),
     commonjs(),
     scssVariable(),
   ]
}

现在，在使用此库的项目中，我尝试导入
变量.scss
并覆盖变量，但它不起作用：

// this is in the package that uses this library
@import '<PackageName>/src/styles/variables.scss;
$primary: red;

//这在使用此库的包中
@导入'/src/styles/variables.scss；
$primary:红色；

然后，当我绘制
action按钮时，它仍然是蓝色的

我需要在我的库中做什么才能实现这种功能？
只需导入
！在组件变量之前，将默认的
变量输入到特定项目中

以下是SASS文档中的描述：

变量默认值：！违约
如果尚未分配变量，则可以通过添加
来分配变量！默认值
标志位于值的末尾。这意味着如果变量已经被赋值，它将不会被重新赋值，但是如果它还没有值，它将被赋值

它转换为逻辑，然后如果默认变量值已在项目中定义，则不会由下一个默认值重新定义。
只有第一个
！默认值
变量值适用

例如：

$primary: blueviolet !default;
$primary: greenyellow !default;

.element {
  color: $primary; // will resolve to 'blueviolet'
}

检查stackblitz：

更新：
若要将其用于当前配置，请直接从库中导入带有scss文件的样式：

// this is in the package that uses this library
@import './your-redefined-variables.scss';
@import '<PackageName>/src/styles/variables.scss';
@import '<PackageName>/src/styles/library-styles.scss';

.element {
  color: $primary;
}

//这在使用此库的包中
@导入“./您重新定义的变量.scss”；
@导入“/src/styles/variables.scss”；
@导入“/src/styles/library styles.scss”；
.元素{
颜色：$primary；
}
在您使用的文件中
@import'/src/styles/variables.scss？在使用我试图创建的库的项目的主scss文件中，由于库是在生成后创建的，因此该文件将不起作用，也就是说，当我查看库的输出css时，变量的值已经显示为颜色，而不是变量。为什么在最初的问题中没有提到从库导入时使用css文件而不是SCS的内容？因为您将样式编译为CSS，所以导入变量没有意义。您必须从库中导入scss文件。以引导程序库为例。它提供了带有预编译CSS的默认样式（就像您现在所做的那样），并且如果您导入样式的SCSS文件以覆盖默认值，则可以使用变量扩展样式。添加了回答示例。为了清楚起见，您需要将每个组件的所有
scss
导入提取到单个
scss
文件中，然后像使用
库样式一样将其导入项目中。scss
// this is in the package that uses this library
@import './your-redefined-variables.scss';
@import '<PackageName>/src/styles/variables.scss';
@import '<PackageName>/src/styles/library-styles.scss';

.element {
  color: $primary;
}