如何安装 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

我安装了苗条的处理器。

从错误看来，我需要在“汇总”中设置一些内容。

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

谢谢！

附录：

Routeify 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 Material 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

我问过 Discord，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'
            ]
          }]
        ]
      })
    ]
  },