Получение svelte-material-ui работы с snowpack и sass

Question

Я пытаюсь заставить стройный пользовательский интерфейс материала работать со снежным покровом. Я установил шаблон Snowpack и Snowpacks svelte следующим образом:

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

Это работает, появляется образец стройной страницы. Затем я следовал инструкциям пользовательского интерфейса Svelte Material, чтобы "связать это с вашим собственным кодом", как указано в главе "Использование" в инструкциях здесь: https://github.com/hperrin/svelte-material-ui

Итак, я установил Sass и настроил его в своем snowpack.config.json файл вроде этого:

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

Я выполнил (очень краткие) инструкции здесь: https://www.snowpack.dev/

Я также добавил пустой src/theme/_smui-theme.scss в исходные файлы, как сказано в инструкции, и я установил компоненты nessecary @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)

Похоже, что @import заявления в пользовательском интерфейсе материала _index.scssне распознаются. Я считаю, что 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