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

Question

我相信现在可以在Svelte配置中使用预处理器。但是我还没有成功完成它……（猜想社区可以在Rollup和Webpack中使用一个有效的示例）。

在进一步修补之前，我想知道是否有可能在svelte编译器中使用rollup / webpack config预处理global.css（或任何“非组件式” css），因为它可以编译主要js？

虽然我喜欢将CSS绑定到组件的想法，但有些开发人员不仅依赖全局样式，而且也依赖于组件样式，因此他们不必在每个组件中都重复样式。

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

Answer 1

这实际上不是特定于Svelte的问题，但是在Svelte的模板中，这是一些有关如何执行此操作的指导。

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

此任务的常用插件包括其各自的捆绑器的rollup-plugin-postcss和css-loader。

我已经推送了一个在分支here上结合使用PostCSS和汇总功能的示例（有关安装/使用，请参阅自述文件。

本质上，这是将PostCSS支持添加到Svelte的官方汇总模板中所需的步骤...

安装rollup-plugin-postcss：

npm install --dev rollup-plugin-postcss
[将插件添加到您的rollup.config.js：

export default {
  ...
  plugins: [
    svelte( ... ),
    postcss({
      extract: 'public/build/global.css',
      sourceMap: true,
      minimize: true,
    }),
  ]
}
当然，可以通过多种方式配置此插件，这取决于您的项目。这里显示的只是使其工作。有关所有可用选项，请参阅文档插件：https://github.com/egoist/rollup-plugin-postcss。

更新您的index.html以引用已处理资产：

<!-- <link rel='stylesheet' href='/global.css'> -->
<link rel='stylesheet' href='/build/global.css'>
（（如果需要，您可以从技术上保留未处理的global.css。]

最后，将您的CSS源文件导入到js文件中：

例如，在main.js中：

import './global.css';
...
new App(...)
将CSS文件包含在捆绑包中是必需的。否则，捆绑程序将不知道此文件已在您的应用程序中使用（就像您有一个JS文件未导入到任何地方，而且不是入口点一样）。

[显然，JS会试图导入原始CSS感到窒息。这就是为什么需要特殊的插件/加载器来处理它的原因。

这些只是大招，但我希望它可以帮助您入门。