@storybook/vue中装饰器导入样式全局污染问题求助

我当前使用@storybook/vue": "^6.5.10"，组件样式通过.vue文件底部的<style>块定义，另有部分全局CSS（Sass）文件由Rails Webpacker编译。为在Storybook中复现全局CSS环境，我编写了装饰器来构建不同CSS上下文，但出现问题：某装饰器中导入的样式会应用到未使用该装饰器的其他组件/故事中。

装饰器代码 #

// THESE 👇 STYLES ARE SHOWING UP IN STORIES THAT DO NOT USE THIS DECORATOR!
import '!style-loader!css-loader!sass-loader!../../app/javascript/styles/site.sass';

const sitePackDecorator = (story) => {

    // other irrelevant stuff
    
    return {
      components: { story },
      template: '<story />'
    }
  }
;

export {sitePackDecorator}

故事文件中装饰器的应用方式 #

import MyComponent from '../app/javascript/src/site/components/assets/MyComponent'
import { sitePackDecorator } from './utilities/sitePackDecorator';

export default {
  title: 'My Component',
  component: MyComponent,
  parameters: {
    layout: 'fullscreen'
  },
  decorators: [sitePackDecorator]
};
const Template = (args, { argTypes }) => ({
    components: { MyComponent },
    props: Object.keys(argTypes),
    template: '<MyComponent v-bind="$props" />',
  })

Rails Webpack/Webpacker配置 #

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')
const sass = require('./loaders/sass')
const pug = require('./loaders/pug')
const customConfig = require('./alias')
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('sass', sass)
environment.loaders.prepend('vue', vue)
environment.loaders.prepend('pug', pug)
environment.config.merge(customConfig)
environment.plugins.prepend("CleanWebpackPlugin", new CleanWebpackPlugin());

module.exports = environment

Storybook main.js配置 #

const custom = require('../config/webpack/development.js');

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/vue",
  webpackFinal: async (config) => {
    return { ...config, module: { ...config.module, rules: custom.module.rules } };
  },
}

注：运行yarn storybook --debug-webpack时看到提示：info => Using implicit CSS loaders，不确定其含义但可能相关。

已尝试的无效方法 #

• 将import !style-loader!...移入故事文件
• 完全不使用该装饰器，样式仍会被加载
• 将import !style-loader!...移入装饰器的箭头函数中，因import需在顶层报错
• 改为import '../site.sass'
• 改为命名导入（import styles from '../site.sass'）并调用use()方法

内容的提问来源于stack exchange，提问作者emersonthis