如何安装Svelte Material UI (使用Routify)

Question

我正在尝试将Svelte Material UI安装到Routify模板项目中：

https://routify.dev/guide/installation

当我这样做的时候：

npm install --save-dev svelte-material-ui

一切都安装得很好。

当我尝试引用一个组件时，例如：

  import Button from '@smui/button';

我得到一个错误：

Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
node_modules/@smui/button/_index.scss (1:0)
1: @import "smui-theme";
   ^
2: @import "./style";
Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
    at error (/home/wktdev/Desktop/svelte_sandbox/routify_sandbox/svlete_routify-sandbox/node_modules/rollup/dist/shared/rollup.js:5174:30)
    at Module.error (/home/wktdev/Desktop/svelte_sandbox/routify_sandbox/svlete_routify-sandbox/node_modules/rollup/dist/shared/rollup.js:9629:16)
    at tryParse (/home/wktdev/Desktop/svelte_sandbox/routify_sandbox/svlete_routify-sandbox/node_modules/rollup/dist/shared/rollup.js:9543:23)
    at Module.setSource (/home/wktdev/Desktop/svelte_sandbox/routify_sandbox/svlete_routify-sandbox/node_modules/rollup/dist/shared/rollup.js:9935:30)
    at ModuleLoader.addModuleSource (/home/wktdev/Desktop/svelte_sandbox/routify_sandbox/svlete_routify-sandbox/node_modules/rollup/dist/shared/rollup.js:17813:20)

我已经在项目中安装了全局和本地的sass。

npm install -g sass

npm instal sass

我安装了svelte处理器。

从错误中看，我需要在"rollup“中设置一些东西。

使用React，安装material ui是一个简单的NPM安装。我不确定我做错了什么。

谢谢!

附录：

路由rollup.config.js文件如下：

import { createRollupConfigs } from './scripts/base.config.js'
import autoPreprocess from 'svelte-preprocess'
import postcssImport from 'postcss-import'

const production = !process.env.ROLLUP_WATCH;

export const config = {
  staticDir: 'static',
  distDir: 'dist',
  buildDir: `dist/build`,
  serve: !production,
  production,
  rollupWrapper: rollup => rollup,
  svelteWrapper: svelte => {
    svelte.preprocess = [
      autoPreprocess({
        postcss: { plugins: [postcssImport()] },
        defaults: { style: 'postcss' }
      })]
  },
  swWrapper: worker => worker,
}

const configs = createRollupConfigs(config)

export default configs

/**
  Wrappers can either mutate or return a config

  wrapper example 1
  svelteWrapper: (cfg, ctx) => {
    cfg.preprocess: mdsvex({ extension: '.md' }),
  }

  wrapper example 2
  rollupWrapper: cfg => {
    cfg.plugins = [...cfg.plugins, myPlugin()]
    return cfg
  }
*/

Svelte材质UI rollup.configg.js示例如下：

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';

module.exports = {
  input: 'index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'app'
  },
  plugins: [
    svelte({
      emitCss: true
    }),
    resolve({
      browser: true,
      dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
    }),
    commonjs(),
    postcss({
      extract: true,
      minimize: true,
      use: [
        ['sass', {
          includePaths: [
            './theme',
            './node_modules'
          ]
        }]
      ]
    })
  ],
  watch: {
    clearScreen: false
  }
};

我不知道“汇总”的第一件事，因此我不知道如何协调这两件事。

Answer 1

我在不和谐上问，JakeDK提供了答案。

在rollup.config.js中，添加：

import postcss from "rollup-plugin-postcss";

然后将行'rollupWrapper: rollup => rollup‘更改为

  rollupWrapper: rollup => {
    rollup.plugins = [
      ...rollup.plugins, 
      postcss({
        // extract: true,
        minimize: true,
        use: [
          ['sass', {
            includePaths: [
              './src/theme',
              './node_modules'
            ]
          }]
        ]
      })
    ]
  },