我正在尝试将 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
}
};
我不知道关于“汇总”的第一件事,因此我不知道如何调和这两件事。