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

Electron+Svelte+MaterialUi

  • 运行,报错:

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
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
  • 最终效果

Electron+Svelte+MaterialUi

最后:如果图标出不来

  • 在public/index.html 加入以下行
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!