Svelte项目中rollup-plugin-css-only导入失效问题求助

核心原因 #

rollup-plugin-css-only仅处理组件<script>标签中直接导入的.css文件；而Svelte组件内<style>标签里的@import或src属性，由Svelte自身编译逻辑处理，不会被该插件捕获。如果插件未收集到任何CSS内容，就不会生成目标文件。

分步解决方案 #

1. 使用正确的CSS导入方式 #

只有在组件的<script>中导入.css文件，才会被rollup-plugin-css-only识别：

<!-- 正确：会触发插件处理流程 -->
<script>
  import './exemple.css';
</script>

以下两种方式不会触发插件，请勿使用：

<!-- 错误：由Svelte自身处理，不进入插件流程 -->
<style>
  @import './exemple.css';
</style>

<!-- 错误：同样由Svelte自身处理 -->
<style src='./exemple.css'>
</style>

2. 检查Rollup配置的插件顺序与参数 #

确保rollup-plugin-css-only在svelte插件之后配置，且输出路径正确（路径相对于项目根目录）：

/* rollup.config.js */
import svelte from 'rollup-plugin-svelte';
import css from 'rollup-plugin-css-only';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'public/build/bundle.js',
    format: 'iife',
    name: 'app'
  },
  plugins: [
    svelte({
      compilerOptions: {
        dev: false
      }
    }),
    // 指定输出文件路径
    css({ output: 'public/build/extra.css' }),
    resolve({ browser: true }),
    commonjs()
  ]
};

3. 提取Svelte组件内<style>的样式（可选） #

如果需要把组件内<style>的样式也提取到extra.css中，修改svelte插件配置，将样式传递给rollup-plugin-css-only：

svelte({
  // 禁用Svelte自带的样式内联逻辑，将样式以字符串形式导出
  css: (css) => css.code
}),
css({ output: 'public/build/extra.css' }),

或者直接用svelte插件自带的写入方法（无需rollup-plugin-css-only）：

svelte({
  css: (css) => {
    // 直接将所有组件<style>的样式写入目标文件
    css.write('public/build/extra.css');
  }
}),

4. 验证生成结果 #

执行Rollup构建命令后，用以下命令检查文件是否生成：

find . -type f -name "extra.css"

若文件生成成功，浏览器的404错误会自动消失。

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