Question

我正在与Storybook一起使用。预定义的webpack配置，其中包含一堆带有加载程序的规则，如下所示：

module.exports = async ({config}) => {...} //predefined webpack config is not something I can change

我从此函数返回的所有内容都是Storybook使用的webpack配置。这些规则之一的定义与此类似：

{ 
    test: /\.css$/,
    use: [
        //bunch of loaders 
    ]
}

现在，我不希望将这些加载程序中的任何一个应用于.st.css文件，不幸的是，这些文件也通过了test案例。原因是使用StylableWebpackPlugin时，文档明确声明不应将加载程序应用于.st.css文件。

我目前正在采取以下措施来避免这种情况：

const cssRule = config.module.rules.find(rule => rule.test.toString().includes('css'));
cssRule.exclude = /\.st\.css$/;

我首先要查找css规则，然后向其添加exclude属性。这可以奏效，但感觉很笨拙，如果Storybook决定将rule.test的值更改为其他值，我的代码将被破坏。

理想情况下，我只想向数组添加一个新规则以覆盖以前的规则，但仅适用于st.css文件，这样我就不必依赖已定义的任何内容。

我已经尝试了以下不起作用的方法，webpack只会将空的加载器数组添加到先前为css规则定义的加载器中，而不是覆盖它：

{
test: /\.st.css$/,
loader: []
}

在伪代码中，我想知道是否存在以下类似内容：

{
test: /\.st.css$/`,
excludePreviousLoaders: true
}

完整配置粘贴在此处以供参考：

module.exports = async ({config}) => {
    config.plugins.push(new StylableWebpackPlugin());

    config.module.rules.push(svgRule);

    const cssRule = config.module.rules.find(rule => rule.test.toString().includes('css'));
    cssRule.exclude = /\.st\.css$/;
    return config;
};

从先前定义的规则定义中排除某些文件类型

0 个答案: