Electron+Svelte+MaterialUi

1711293058發表於2020-06-12
UI

在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 協議》，轉載必須註明作者和本文連結