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

Posted 2023-02-16

【中文标题】让 svelte-material-ui 与 snowpack 和 sass 一起使用

【英文标题】：Getting svelte-material-ui working with snowpack and sass

【发布时间】：2020-09-10 04:38:03

【问题描述】：

我正在尝试让精巧的材质 UI 与雪包一起使用。 我已经安装了 Snowpack 和 Snowpacks svelte 模板，如下所示：

npm install --save-dev snowpack@next
npx create-snowpack-app xpapp --template @snowpack/app-template-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 文件，并安装了必要的@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 文件，但它似乎没有这样做。

【问题讨论】：

你好像忘了在开发依赖上安装 sass npm i sass -D

不，Sass 已安装。如果我不得不猜测它似乎是雪包的顺序错误，就像它在用 sass 编译之前首先尝试加载东西一样。我在 svelte-material-ui 存储库中尝试了 rollup.js 示例，并且有效。但是，我很想使用雪包。

我正在经历同样的事情。通过将postcss 添加到snowpack.conf.js 中的installOptions.rollup.plugins 配置，我能够克服该错误。但是，在那之后我仍然遇到问题。如果你弄明白了，请告诉我。

@willsters：我也在雪包问题页面上发布了这个问题。

【参考方案1】：

我可以使用这些安装选项：

  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

【讨论】：

这对我有用，除了一点点变化：因为 snowpack 3.0 installOptions 应该是 packageOptions。

【参考方案2】：

所以我在使用 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')()] 
  ,
  // ...