让 svelte-material-ui 与 Snowpack 和 sass 一起使用

Question

我正在尝试使用 Snowpack 获得 svelte 材质 UI。\n我已经安装了 Snowpack 和 Snowpacks svelte 模板，如下所示：

\n\n

npm install --save-dev snowpack@next\nnpx create-snowpack-app xpapp --template @snowpack/app-template-svelte\n

\n\n

这有效，示例页面显示出来。接下来，我按照 Svelte Material UI 说明“将其捆绑在您自己的代码中”，如此处说明中的“使用”章节所引用：https ://github.com/hperrin/svelte-material-ui#usage

\n\n

所以我安装了 Sass 并在我的snowpack.config.json如下所示：

\n\n

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

\n\n

我按照此处的（非常简洁的）说明进行操作： https: //www.snowpack.dev/#sass

\n\n

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

\n\n

问题是我当前在启动 Snowpack 开发服务器时遇到此错误：

\n\n

> snowpack dev\n\nSnowpack Dev Server (Beta)\nNOTE: Still experimental, default behavior may change.\nStarting up...\n\n\xe2\xa0\x99 snowpack installing... @smui/icon-button, @smui/top-app-bar, svelte/internal\n\xe2\x9c\x98 /home/erik/Projects/svelte-xpapp/xpapp/node_modules/@smui/icon-button/_index.scss\n\nError: Unexpected character \'@\' (Note that you need plugins to import files that are not JavaScript)\n    at error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:161:30)\n    at Module.error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15120:16)\n    at tryParse (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15009:23)\n    at Module.setSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15410:30)\n    at ModuleLoader.addModuleSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17460:20)\n    at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17521:9)\n    at async /home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17491:36\n    at async Promise.all (index 0)\n    at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17522:9)\n    at async Promise.all (index 0)\n

\n\n

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

\n

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')()] }
  },
  // ...
}