Проблемы, связанные с объединением Svelte Material UI с пользовательским SCSS с помощью Rollup

У меня есть 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 не компилируется (или не перезаписывается во время сборки).

Я ищу иголку в стоге сена и ценю любой намек.


person Jean D.    schedule 01.10.2020    source источник


Ответы (1)


Понятно, я просто пропустил добавление emitCss: true в конфигурацию плагина Svelte. Итак, мой рабочий файл 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');
            },
            emitCss: true,
            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
    }
};

Ответ на этот вопрос также был дан здесь.

person Jean D.    schedule 02.10.2020