使用snowpack和sass获得纤细的材质ui

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

npm安装--保存开发snowpack@next
npx创建雪包应用程序xpapp——模板@snowpack/应用程序模板svelte

这样，就会显示“苗条”页面示例。接下来，我按照Svelte Material UI说明“将其捆绑到您自己的代码中”，如此处说明的使用章节所述：

因此，我安装了Sass，并在我的

snowpack.config.json

文件中对其进行了如下配置：

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

我在这里遵循了（非常简洁的）说明：

我还向我的源文件中添加了一个空的

src/theme/_smui-theme.scss

文件，如说明所示，并安装了nesecary@smui组件

问题是，我当前在启动snowpack dev服务器时遇到此错误：

> 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)

---

似乎无法识别物料界面的

\u index.scs

中的

@import

语句。我认为Snowpack应该解释/transfile.scss文件，但它似乎没有这样做。

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

//component.svelte
导入按钮，{Label}来自“@smui/Button/bare”
导入“@smui/button/bare.css”

这就是斯维特的全部要求

对于Snowpack，我需要添加

rollup插件svelte

并更新

Snowpack.config.js

//snowpack.config.js
module.exports={
// ...
安装选项：{
汇总：{plugins:[require（'rollup-plugin-svelte'）（）]}
},
// ...
}

我使用了以下安装选项：

  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文件中。 在生产构建期间，我还收到了对话框组件的错误消息

---

下面是一个完整的示例：

似乎您忘记在开发依赖项上安装sass

npm i sass-D

Nope，sass已安装。如果非要我猜的话，似乎snowpack的顺序是错误的，就像它在使用sass编译之前第一次尝试加载东西一样。我在svelte material ui repo中尝试了rollup.js示例，效果不错。然而，我真的很想使用雪地包。我正在经历完全相同的事情。我通过在

snowpack.conf.js

中的

installOptions.rollup.plugins

config中添加

postss

来克服这个错误。然而，在那之后我仍然遇到问题。如果你能弄明白，请告诉我。@willsters:我也在snowpack问题页面上发布了这个问题。这对我来说很有用，只是有一点变化：自snowpack 3.0

installOptions

应该是

packageOptions

。