как использовать scss в svelte 3

Я пытаюсь использовать scss в svelte 3, я выполнил шаги, описанные в этом сообщении: руководство по scss в svelte 3

но я продолжаю получать синтаксическую ошибку

"Ожидается, что двоеточие уменьшится (синтаксическая ошибка css)"

в таком коде:

<style type="text/scss">
  #container {
   display: flex;

     /*error in the div below*/
     div {
     background: red;
    }
  }

i've prettier setup too, but i don't think it's related


sass svelte-3
person Maik Barba    schedule 10.04.2020    source источник
comment
правильно ли вы установили все зависимости, как указано в ссылке на вашу статью?   -  person M A Salman    schedule 10.04.2020
comment
да. Я даже снова загрузил базовый проект, и он продолжает давать мне ту же ошибку   -  person Maik Barba    schedule 10.04.2020
comment
Обратите внимание, что <style lang="scss"> работал у меня лучше.   -  person Mingwei Samuel    schedule 05.07.2021

Ответы (2)


arrow_upward
7
arrow_downward

Node-sass теперь устарел, поэтому приведенное выше по-прежнему применяется, но вместо этого может быть просто npm install svelte-preprocess sass --save-dev :)

person ben-southpaw    schedule 25.11.2020

arrow_upward
4
arrow_downward

Чтобы добавить поддержку scss, вам потребуется добавить препроцессор, например svelte-preprocess.

npm install svelte-preprocess node-sass --save-dev

В rollup.config.js:

import sveltePreprocess from 'svelte-preprocess';

а затем под

plugins: [
    svelte({
        ...,
        preprocess: sveltePreprocess()
    }),

и перезапустите сервер.

Чтобы включить поддержку scss в vscode, создайте файл svelte.config.js:

const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: sveltePreprocess(),
}

И перезапустите vscode

person Peter Kitts    schedule 07.06.2020