无法使用 svelte-image 处理 scss答案

【问题标题】：Unable to process scss with svelte-image无法使用 svelte-image 处理 scss
【发布时间】：2021-04-02 23:32:02
【问题描述】：

我想将 scss 与 svelte 和 svelte-image 一起使用，但出现错误（没有苗条的形象，一切都很好）

错误：

CompileError [ParseError]: Colon is expected

code: 'css-syntax-error',
  start: { line: 26, column: 6, character: 394 },
  end: { line: 26, column: 6, character: 394 },
  pos: 394,
  filename: undefined,
  frame: '24:     z-index: 99;\n' +
    '25: \n' +
    '26:     img {\n' +
    '            ^\n' +
    '27:       width: 100%;\n' +
    '28:       height: auto;'

这是我的汇总配置


import svelte from "rollup-plugin-svelte";
...

import scss from "rollup-plugin-scss";
import sveltePreprocess from "svelte-preprocess";
import image from "svelte-image";

...

export default {
  ...

  plugins: [
    svelte({
      preprocess: [
        sveltePreprocess({
          scss: {
            includePaths: ["src"],
          },
          postcss: {
            plugins: [require("autoprefixer")],
          },
        }),

        image({
          optimizeAll: true,
          publicDir: "./public/",
          quality: 80,
        }),
      ],
      compilerOptions: {
        // enable run-time checks when not in production
        dev: !production,
      },
    }),

    scss({
      output: "./public/build/bundle.css",
    }),

    ...

  ],
};

我认为它来自预处理器顺序（标记然后脚本然后样式）

我应该将样式添加到单独的 scss 中吗？

【问题讨论】：

标签： sass svelte svelte-3

【解决方案1】：

您必须按顺序运行预处理器，因为 svelte-image 在内部使用 svelte.parse()，因此如果存在任何 scss，则需要先运行 svelte-preprocess。

您可以使用https://www.npmjs.com/package/svelte-sequential-preprocessor 并执行以下操作：

svelte({
  preprocess: seqPreprocessor([ autoPreprocess(), image() ])
})

【讨论】：

谢谢，我会尽快检查：)