Блог

Я хотел бы использовать scss со svelte и svelte-image, но я получил сообщение об ошибке (без 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?

Вы должны запускать препроцессоры последовательно, потому что svelte-image использует svelte.parse() внутренне, поэтому svelte-preprocess необходимо запускать раньше, если присутствует какой-либо scss.

Вы можете использовать https://www.npmjs.com/package/svelte-sequential-preprocessor и сделайте что-то вроде этого:

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