如何在使用 svelte 3 中使用 scss答案

【问题标题】：how to use scss in use svelte 3如何在使用 svelte 3 中使用 scss
【发布时间】：2020-07-23 04:50:10
【问题描述】：

我正在尝试在 svelte 3 中使用 scss，我已经完成了这篇文章中的步骤： scss guide in svelte 3

但我一直收到语法错误

"冒号是预期的svelte(css-syntax-error)"

在这样的代码中：

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

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

我也有更漂亮的设置，但我认为这无关

【问题讨论】：

【解决方案1】：

要添加对 scss 的支持，您需要添加一个预处理器，例如 svelte-preprocess

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

在 rollup.config.js 中：

import sveltePreprocess from 'svelte-preprocess';

然后下

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

然后重启服务器。

要在 vscode 中启用 scss 支持，请创建一个 svelte.config.js 文件：

const sveltePreprocess = require('svelte-preprocess')

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

然后重启 vscode

【讨论】：

【解决方案2】：

Node-sass 现在已被弃用，所以上面仍然适用，但可以只是 npm install svelte-preprocess sass --save-dev 代替 :)

【讨论】：