Electron+Svelte+MaterialUi

在Electron中 使用 sveltematerialui

1. 文档

1. sveltematerialui 官网
2. scss报错 参考文档1 参考文档2
3. 安装教程 github
4. 完整配置 github

2. 使用ui

• 安装插件

# Install the packages individually.
npm install --save-dev @smui/button
npm install --save-dev @smui/card
# ...

# Or, you can install this to get them all.
npm install --save-dev svelte-material-ui

• 使用 参考

<!--这里只是部分代码，源码是从这个demo复制过来的 -->
<!-- https://github.com/hperrin/svelte-material-ui/blob/master/site/src/routes/demo/fab.svelte -->
<div class="margins">
    <Fab color="primary" on:click={() => clicked++} extended>
    <Label>Extended W/o Icon</Label>
    </Fab>
</div>

• 增加主体文件，否则看不到样式

下载 github.com/hperrin/svelte-material...

存储为 src/theme/_smui-theme.scss

• 运行，报错:

Error: Unexpected character ‘@’ (Note that you need plugins to import files that are not JavaScript)
node_modules/@smui/button/_index.scss

因为不支持scss， 参考文档

• 参考，官方配置

• 修改rollup.config.js:

• 添加函数

// rollup.config.js
import path from  'path';
import postcss from  'rollup-plugin-postcss';

const postcssOptions = () => ({
  extensions: ['.scss', '.sass'],
  extract: false,
  minimize: true,
  use: [
    ['sass', {
      includePaths: [
        './src/theme',
        './node_modules',
        // This is only needed because we're using a local module. :-/
        // Normally, you would not need this line.
        path.resolve(__dirname, '..', 'node_modules')
      ]
    }]
  ]
});

• 在plugins 中加入 postcss(postcssOptions())

// rollup.config.js
export default {
  input: 'input.js',
  output: {
    file: 'output.js',
    format: 'esm'
  },
  plugins: [
    postcss(postcssOptions())
  ]
}

运行如果报错

Cannot find module ‘sass’

• 那是因为:

Options are passed to the sass compiler (node-sass by defaut). By default the plugin will base the filename for the css on the bundle destination.

• 安装node-sass

npm install node-sass

如果运行报错: Cannot find module ***，根据报错信息，缺少什么模块，就安装什么模块

• 可能还需要安装的模块包含（不限于）以下几个

npm install --save-dev rollup-plugin-scss
npm install --save-dev postcss-url
npm install --save-dev autoprefixer
//等等

• 运行

npm run electron-dev

• 最终效果

最后：如果图标出不来

• 在public/index.html 加入以下行

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

本作品采用《CC 协议》，转载必须注明作者和本文链接