如何在Rollup中无需修改代码实现CSSStyleSheet构造样式表导入？

你可以使用rollup-plugin-styles插件来实现和Webpack中css-loader的exportType: 'css-style-sheet'相同的效果，无需修改现有组件代码。

步骤1：安装插件 #

执行以下命令安装依赖：

npm install rollup-plugin-styles --save-dev

步骤2：配置Rollup #

在你的rollup.config.js中添加插件配置，指定将CSS导出为CSSStyleSheet实例：

import styles from 'rollup-plugin-styles';

export default {
  input: 'src/main.js', // 替换为你的项目入口文件
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    styles({
      exportDefault: 'style-sheet', // 核心配置：将CSS导出为CSSStyleSheet实例
      modules: false, // 关闭CSS Modules，与原Webpack配置保持一致
    })
  ]
};

效果验证 #

配置完成后，你原有的组件代码完全不需要修改：

import styles from './styles.css';

class MyComponent extends HTMLElement {
   constructor() {
      super();
      this.shadowRoot.adoptedStyleSheets = [styles];
   }
}

此时styles变量会自动成为CSSStyleSheet的实例，可直接赋值给adoptedStyleSheets，和Webpack环境下的行为完全一致。

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