У меня есть Svelte 3.x (с включенным TS) и довольно стандартная конфигурация Rollup для объединения моих файлов SCSS с этой файловой структурой:
| src
| styles.scss
| etc.
rollup.config.js:
export default {
input: 'src/main.ts',
output: {
sourcemap: true,
format: 'iife',
name: 'myapp',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write('bundle.css');
},
preprocess: autoPreprocess(),
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
typescript({ sourceMap: !production }),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
Это нормально работает. Теперь мне сложно запустить Svelte Material UI.
После установки postcss
, rollup-plugin-postcss
, rollup-plugin-sass
, svelte-material-ui
и svelte-preprocess-sass
и прочтения здесь и там и там Я добавил это в массив плагинов в rollup.config.js:
postcss({
extract: true,
minimize: true,
use: [
['sass', {
includePaths: [
'./src/theme',
'./node_modules'
]
}]
]
})
Когда я тестирую его в своем приложении с помощью @smui/button
, кнопка (со стилем по умолчанию и эффектом пульсации по умолчанию) работает, но ни один из моих SCSS не компилируется (или не перезаписывается во время сборки).
Я ищу иголку в стоге сена и ценю любой намек.