sass - 使用 snowpack 和 sass 获取 svelte-material-ui

Question

我正在尝试使用 snowpack 获得精巧的 Material UI。我已经像这样安装了 Snowpack 和 Snowpacks 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')()] }
  },
  // ...
}