webpack - 如何在 Svelte 编译器中使用 Rollup 或 Webpack 预处理组件 CSS 和全局样式？

Question

我相信现在可以选择在 svelte config 中使用预处理器。但我还没有成功地做到这一点......(猜猜社区可以使用 Rollup 和 Webpack 的工作示例)。

在我进一步修补之前，我想知道是否可以在编译主 js 时在 svelte 编译器中使用 rollup/webpack 配置预处理 global.css(或任何“非组件”css)？

虽然我确实喜欢将 CSS 绑定(bind)到组件的想法，但有些开发人员依赖全局样式和组件样式一样多，因此他们不必在每个组件中重复重复样式。

没有要显示的代码，因为我不知道从哪里开始？

Answer 1

这并不是真正的 Svelte 特定问题，但这里有一些关于如何在 Svelte 的模板中执行此操作的说明。

为了让捆绑器处理 CSS Assets (例如 Rollup、Webpack...)，您需要将 CSS 文件导入到您的 JS 模块中，并使用适当的捆绑器插件/加载器来处理这些导入。

此任务的流行插件包括 rollup-plugin-postcss和 css-loader , 对于他们各自的捆绑器。

我已经推送了一个在分支 here 上使用 PostCSS 和 Rollup 的示例(有关安装/使用，请参阅自述文件)。

本质上，这里是将 PostCSS 支持添加到 Svelte 的官方 Rollup 模板需要遵循的步骤......

安装 rollup-plugin-postcss :

npm install --dev rollup-plugin-postcss

将插件添加到您的 rollup.config.js :

import postcss from 'rollup-plugin-postcss';

export default {
  ...
  plugins: [
    svelte( ... ),
    postcss({
      extract: 'public/build/global.css',
      sourceMap: true,
      minimize: true,
    }),
  ]
}

当然，可以通过多种方式配置此插件，这取决于您的项目。这里显示的只是为了让它工作。请参阅插件文档了解所有可用选项: https://github.com/egoist/rollup-plugin-postcss .

更新您的 index.html引用已处理的 Assets :

<!-- <link rel='stylesheet' href='/global.css'> -->
<link rel='stylesheet' href='/build/global.css'>

(如果您愿意，从技术上讲，您可以保留未处理的 global.css。)

最后，在你的js文件中导入你的css源文件:

例如，在 main.js :

import './global.css';
...
new App(...)

这是要包含在包中的 CSS 文件所必需的。否则，捆绑器将不知道您的应用程序中使用了此文件(就像您有一个无处导入的 JS 文件一样 - 并且不是入口点)。

显然，JS 在尝试导入原始 CSS 时会窒息。这就是为什么需要一个特殊的插件/加载器来处理它。

这些只是粗略的笔触，但我希望它可以帮助您入门。