全球包括 Storybook LESS 进口如何区分每个故事的风格？

问题描述

在我的 storybook 站点上，我为我的一些组件添加了 Less 导入，但是 webpack 生成的 CSS 文件被全局包含在站点的所有组件中。从故事书文档来看，CSS 似乎默认情况下应该与每个组件隔离，所以我不确定问题是什么。关于如何隔离每个组件/故事的样式有什么建议吗？

版本：故事书 6.2.9

Main.js (less-loader):

config.module.rules.push({
      test: /\.less$/,use: [
        'style-loader','css-loader',{
          loader: 'less-loader',options: {
            lessOptions: {
              paths: [path.resolve(__dirname,"node_modules")],},sourceMap: true,webpackImporter: false,}
        }]
    });

stories/component.stories.js：

import React from 'react';
import { Component } from './component.js';
import './component.less';
import '@package/index.less';

...

stories/component-2.stories.js:

import React from 'react';
import { Component2 } from './component2.js';
import './component2.less';
import '@package-2/index.less';

...

这会导致所有 LESS 文件都转换为 CSS 并添加到站点的部分。它们不会按故事单独加载。

如果我错过了任何信息，请lmk。谢谢:)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）