Getting svelte-material-ui使用snowpack和sass

Question

我正在尝试让纤细的材料用户界面与积雪工作。我安装了Snowpack和svelte模板，如下所示：

npm install --save-dev snowpack@next
npx create-snowpack-app xpapp --template @snowpack/app-template-svelte

这样一来，示例svelte页面就会出现。接下来，我按照Svelte Material的UI说明“将其捆绑到您自己的代码中”，如此处说明中的用法章节所述：https://github.com/hperrin/svelte-material-ui#usage

因此，我安装了Sass并在我的snowpack.config.json文件中进行了如下配置：

{
  "extends": "@snowpack/app-scripts-svelte",
  "scripts": { 
    "build:scss": "sass"
  },
  "devOptions": {},
  "installOptions": {}
}

我遵循了这里的(非常简洁的)说明：https://www.snowpack.dev/#sass

按照说明，我还在源文件中添加了一个空的src/theme/_smui-theme.scss文件，并安装了nessecary @smui组件。

问题是，当我启动snowpack开发服务器时，我得到了这个错误：

> snowpack dev

Snowpack Dev Server (Beta)
NOTE: Still experimental, default behavior may change.
Starting up...

⠙ snowpack installing... @smui/icon-button, @smui/top-app-bar, svelte/internal
✘ /home/erik/Projects/svelte-xpapp/xpapp/node_modules/@smui/icon-button/_index.scss

Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
    at error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:161:30)
    at Module.error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15120:16)
    at tryParse (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15009:23)
    at Module.setSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15410:30)
    at ModuleLoader.addModuleSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17460:20)
    at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17521:9)
    at async /home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17491:36
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17522:9)
    at async Promise.all (index 0)

Material UI的_index.scss中的@import语句似乎无法识别。我认为Snowpack应该可以解释/转换.scss文件，但它似乎没有做到这一点。

Answer 1

所以我在使用Svite和Snowpack时遇到了同样的问题。我能够使用简单的实现：

// component.svelte <script>
import Button, { Label } from '@smui/button/bare'
import '@smui/button/bare.css'

这就是Svite所需要的全部。

使用Snowpack，我需要添加rollup-plugin-svelte并更新snowpack.config.js

// snowpack.config.js
module.exports = {
  // ...
  installOptions: {
    rollup: { plugins: [require('rollup-plugin-svelte')()] }
  },
  // ...
}

Answer 2

我使用以下安装选项使其正常工作：

  installOptions: {
    rollup: {
      plugins: [
        require("rollup-plugin-svelte")({
          include: ["./node_modules"],
        }),
        require("rollup-plugin-postcss")({
          use: [
            [
              "sass",
              {
                includePaths: ["./src/theme", "./node_modules"],
              },
            ],
          ],
        }),
      ],
    },
  },

不幸的是，您必须运行npx snowpack dev --reload才能使对主题的更改生效。这不会将css提取到.css文件中。在产品构建过程中，我还收到了关于Dialog组件的错误消息。

下面是一个完整的示例：https://github.com/LeanderG/svelte-smui