storybook [Bug]:最新版本的:export语句在.scss文件中存在问题,

ca1c2owp  于 3个月前  发布在  其他
关注(0)|答案(2)|浏览(39)

描述bug

我们有一个文件

$_XS: 414;
$_XS_SM: 568;
$_SM: 768;
$_SM_MD: 960;
$_MD: 1024;
$_MD_LG: 1280;
$_LG: 1366;
$_XL: 1920;

$XXS: #{$_XXS}px;
$XS: #{$_XS}px;
$XS_SM: #{$_XS_SM}px;
$SM: #{$_SM}px;
$SM_MD: #{$_SM_MD}px;
$MD: #{$_MD}px;
$MD_LG: #{$_MD_LG}px;
$LG: #{$_LG}px;
$XL: #{$_XL}px;

:export {
  XXS: $_XXS;
  XS: $_XS;
  XS_SM: $_XS_SM;
  SM: $_SM;
  SM_MD: $_SM_MD;
  MD: $_MD;
  MD_LG: $_MD_LG;
  LG: $_LG;
  XL: $_XL;
}

在版本6之前,这个在webpackFinal中可以正常工作

config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

升级到最新版本后,这个.scss文件不再被解析,因此我的storybook会因为无法读取XS的未定义而崩溃。
我尝试了discord,也尝试了github上的styling addon webpack,但都没有成功。
有人能告诉我该怎么做,让一个简单的.scss文件和导出功能正常工作吗?

重现问题

  • 无响应*

系统信息

  • 无响应*

其他上下文信息

  • 无响应*
s5a0g9ez

s5a0g9ez1#

在这里也遇到了同样的问题😞,有什么解决办法吗?

ngynwnxp

ngynwnxp2#

我最终创建了一个单独的 .ts 文件,并在整个应用程序中使用它。

export const breakpoints = {
    XXS: 320,
    XS: 414,
    XS_SM: 568,
    SM: 768,
    SM_MD: 960,
    MD: 1024,
    MD_LG: 1280,
    LG: 1366,
    XL: 1920,
};

然而,这意味着现在我需要维护两个文件,以防万一出现破坏单一源代码真实性原则的情况:/

相关问题