如何在 use svelte 3 中使用 scss

Question

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

但我不断收到语法错误

“冒号是expectedsvelte（css-syntax-error）”

在这样的代码中：

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

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

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

Answer 1

当您使用它svelte-kit来创建 svelte 应用程序时，无需更改，svelte.config.js因为它已经设置完毕，如下所示：

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        adapter: adapter()
    }
};

export default config;

您所要做的就是sass使用包管理器进行安装，如下所示：

yarn add -D sass
# or using npm
npm i --save-dev sass

繁荣！您将能够使用sass或scss通过将属性值更改为lang或来设置组件的sass样式scss

1. 使用scss

<div class="app">
    <div class="app__bin">
        <h1>Hello world</h1>
    </div>
</div>

<style lang="scss">
    .app {
        .app__bin {
            h1 {
                color: red;
            }
        }
    }
</style>

2. 使用sass

<style lang="sass">
    .app 
        .app__bin
            h1
                color: red
</style>

快乐黑客与 svelte！

Answer 2

Node-sass 现在已被弃用，因此上述仍然适用，但可以 npm install svelte-preprocess sass --save-dev改为 :)

Answer 3

要添加对 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