如何将 scss 移动到 svelte 3 中的新文件？

问题描述

我有一个包含一些 scss 代码的组件 App.svelte。我想将我的 scss 代码移动到一个新文件，以便我可以在同一文件上运行 stylelint。我正在使用 rollup.js

<script>
  export let brandName = 'Stackoverflow';
</script>
<svelte:options tag="component-name"></svelte:options>

<main>
    <h1>Wizard <span class="span">{brandName}</span></h1>
</main>


<style lang="scss">
  h1{
    color: red;
    span {
      color: green;
    }
  }

</style>

解决方法

您可以通过使用 svelte-preprocess 包处理 .scss 文件来实现这一点。您需要更新您的rollup.config.js：

// ...

import sveltePreprocess from "svelte-preprocess";

export default {
  // ...
  plugins: [
    svelte({
      preprocess: sveltePreprocess(),// ...

然后您可以导入您的样式文件，例如：

<script>
    import "./styles.scss";
    // ...
</script>