Как установить Svelte Material UI (с Routify) - PullRequest
Новая
       115

Как установить Svelte Material UI (с Routify)

0 голосов
/ 07 августа 2020

Я пытаюсь установить Svelte Material UI в проект Routify Template:

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 proprocessor.

Судя по ошибкам, мне кажется, что мне нужно что-то установить в «свертке» ".

В React установка материала ui выполняется просто NPM. Я не уверен, что делаю неправильно.

Спасибо!

Дополнение:

Файл Routify 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
  }
};

Я ничего не знаю о «Rollup», поэтому я не знаю, как согласовать эти два вещи.

1 Ответ

0 голосов
/ 17 августа 2020

Я спросил в 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'
            ]
          }]
        ]
      })
    ]
  },
...