如何将Material UI集成到Svelte项目中

问题描述

我想将材质UI 集成到我的Svelte项目中.

I want to integrate Material UI into my Svelte project.

我尝试遵循此处的官方文档，但我没有知道为什么我在尝试运行项目时遇到奇怪的错误:

I tried to follow the official documentation from here, but I don't know why I'm getting a strange error while trying to run my project:

loaded rollup.config.js with warnings
(!) Unused external imports
default imported from external module 'rollup-plugin-postcss' but never used
rollup v1.27.13
bundles src/main.js → public/build/bundle.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/views/App.css (1:0)
1: .footer.svelte-1xl6ht0{position:fixed;left:0;bottom:0;width:100%;background-color:#569e3e;color:white;text-align:center;height:15px}.footer.us.svelte-1xl6ht0,.footer.europe.svelte-1xl6ht0,.footer.central.svelte-1xl6ht0,.footer.south.svelte-1xl6ht0,.footer.apac.svelte-1xl6ht0,.footer.baldr.svelte-1xl6ht0{background-color:#ca4a4a}.footer
....

问题似乎与CSS有关.

The problem seems to be related to CSS.

在我的 src 目录中，有一个名为 theme 的目录，其中包含一个名为 _smui-theme.scss 的文件，这是文件:

In my src directory I have a directory called theme which contains a file called _smui-theme.scss and this is the content of the file:

@import "@material/theme/color-palette";

// Svelte Colors!
$mdc-theme-primary: #ff3e00;
$mdc-theme-secondary: #676778;
// Other Svelte color: #40b3ff

$mdc-theme-background: #fff;
$mdc-theme-surface: #fff;

$mdc-theme-error: $material-color-red-900;

这是我的 rollup.config.json 文件:

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import json from '@rollup/plugin-json';

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js',
    },
    plugins: [
        json(),
        svelte({
            // Enables run-time checks when not in production.
            dev: !production,

            // Extracts any component CSS out into a separate file — better for performance.
            css: css => css.write('public/build/bundle.css'),

            // Emit CSS as "files" for other plugins to process
            emitCss: true,
        }),

        resolve({
            browser: true,
            dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
        }),
        commonjs(),

        // In dev mode, call `npm run start` once the bundle has been generated
        !production && serve(),

        // Watches the `public` directory and refresh the browser on changes when not in production.
        !production && livereload('public'),

        // Minify for production.
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

function serve() {
    let started = false;

    return {
        writeBundle() {
            if (!started) {
                started = true;

                require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                    stdio: ['ignore', 'inherit', 'inherit'],
                    shell: true
                });
            }
        }
    };
}

推荐答案

为解决此问题，需要使用 postcss 插件进行汇总.
我还添加了一个苗条的预处理器(我认为这是可选的，但我想确定).

In order to solve this issue a postcss plugin is needed for rollup.
I have also added a svelte preprocessor (I think this is optional, but I wanted to be sure).

确保使用 npm 或 yarn 安装此软件包:

Make sure you install this packages with npm or yarn:

rollup-plugin-postcss 和 svelte-preprocess

然后将插件添加到 rollup.config.js 中，如下所示:

Then the plugins should be added in rollup.config.js like this:

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';      <<<------------- Add this
import autoPreprocess from 'svelte-preprocess';   <<<------------- Add this
import json from '@rollup/plugin-json';

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js',
    },
    plugins: [
        json(),
        svelte({
            // Enables run-time checks when not in production.
            dev: !production,

            // Extracts any component CSS out into a separate file — better for performance.
            css: css => css.write('public/build/bundle.css'),

            // Emit CSS as "files" for other plugins to process
            emitCss: true,

            preprocess: autoPreprocess()          <<<------------- Add this
        }),

        resolve({
            browser: true,
            dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
        }),
        commonjs(),

        postcss({                               <<<------------- Add this
            extract: true,
            minimize: true,
            use: [
                ['sass', {
                includePaths: [
                    './src/theme',
                    './node_modules'
                ]
                }]
            ]
        }),

        // In dev mode, call `npm run start` once the bundle has been generated
        !production && serve(),

        // Watches the `public` directory and refresh the browser on changes when not in production.
        !production && livereload('public'),

        // Minify for production.
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

function serve() {
    let started = false;

    return {
        writeBundle() {
            if (!started) {
                started = true;

                require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                    stdio: ['ignore', 'inherit', 'inherit'],
                    shell: true
                });
            }
        }
    };
}

现在一切都应该在CSS上正常工作，并且可以使用Material UI.

Now everything should be working right with the css and Material UI can be used.

这篇关于如何将Material UI集成到Svelte项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！