Я пытаюсь установить 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», поэтому я не знаю, как согласовать эти два вещи.