最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Creating an Electron app with Vuejs, Webpack and tailwindcss - Stack Overflow

programmeradmin0浏览0评论

I try to get an Electron app running with webpack, Vuejs and tailwindcss, starting with the electron-webpack template package and adding Vuejs and tailwindcss afterwards, but tailwindcss doesn't work.

There is this equivalent thread on SO, but the solution mentioned there uses electron-vue, which has over 200 open issues and doesn't seems to be maintained anymore.

Does anybody has an idea what went wrong here? I proceeded as follows:

  1. Initialize Electron webback boilerplate (according to here):

    git clone .git project
    cd project
    rm -rf .git
    
  2. Install Vuejs:

    yarn add --dev vue css-loader vue-loader vue-template-piler
    
  3. Setting up webpack for Vuejs:

    const { VueLoaderPlugin } = require("vue-loader");
    
    module.exports = {
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: 'vue-loader'
                }
            ],
            plugins: [
                new VueLoaderPlugin()
            ]
        }
    }
    
  4. Test Vuejs by modifying src/renderer/index.js to:

    'use strict';
    import Vue from 'vue'
    import App from './App.vue'
    
    new Vue({
        el: '#app',
        render(h) {
            return h(App)
        }
    })
    

    and adding src/renderer/App.vue:

    <template>
        <div>Wele</div>
    </template>
    

    → Works so far.

  5. Install tailwindcss:

    yarn add —-dev tailwindcss postcss-loader autoprefixer
    
  6. Add tailwindcss to project:

    • src/renderer/index.js:
      ...
      import './assets/styles.css';
      ...
      
    • src/assets/styles.css:
      @tailwind base;
      @tailwind ponents;
      @tailwind utilities;
      
  7. Include postcss-loader to webpack:

    • Add postcss.config.js:
      const autoprefixer = require('autoprefixer');
      const tailwindcss = require('tailwindcss');
      
      module.exports = {
        plugins: [
          tailwindcss,
          autoprefixer,
        ],
      };
      
    • Modify webpack.config.js:
      ...
      module.exports = {
          module: {
              rules: [
                  ...,
                  {
                      test: /\.css$/,
                      use: [
                      'vue-style-loader',
                      { loader: 'css-loader', options: { importLoaders: 1 } },
                      'postcss-loader'
                      ]
                  }
          ...
      
  8. Test tailwindcss by modifying App.vue:

    <template>
        <div class="bg-blue-100">Wele</div>
    </template>
    

    → Failed: Background of "Wele" text should be blue, but isn't, text is still serif.

I try to get an Electron app running with webpack, Vuejs and tailwindcss, starting with the electron-webpack template package and adding Vuejs and tailwindcss afterwards, but tailwindcss doesn't work.

There is this equivalent thread on SO, but the solution mentioned there uses electron-vue, which has over 200 open issues and doesn't seems to be maintained anymore.

Does anybody has an idea what went wrong here? I proceeded as follows:

  1. Initialize Electron webback boilerplate (according to here):

    git clone https://github./electron-userland/electron-webpack-quick-start.git project
    cd project
    rm -rf .git
    
  2. Install Vuejs:

    yarn add --dev vue css-loader vue-loader vue-template-piler
    
  3. Setting up webpack for Vuejs:

    const { VueLoaderPlugin } = require("vue-loader");
    
    module.exports = {
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: 'vue-loader'
                }
            ],
            plugins: [
                new VueLoaderPlugin()
            ]
        }
    }
    
  4. Test Vuejs by modifying src/renderer/index.js to:

    'use strict';
    import Vue from 'vue'
    import App from './App.vue'
    
    new Vue({
        el: '#app',
        render(h) {
            return h(App)
        }
    })
    

    and adding src/renderer/App.vue:

    <template>
        <div>Wele</div>
    </template>
    

    → Works so far.

  5. Install tailwindcss:

    yarn add —-dev tailwindcss postcss-loader autoprefixer
    
  6. Add tailwindcss to project:

    • src/renderer/index.js:
      ...
      import './assets/styles.css';
      ...
      
    • src/assets/styles.css:
      @tailwind base;
      @tailwind ponents;
      @tailwind utilities;
      
  7. Include postcss-loader to webpack:

    • Add postcss.config.js:
      const autoprefixer = require('autoprefixer');
      const tailwindcss = require('tailwindcss');
      
      module.exports = {
        plugins: [
          tailwindcss,
          autoprefixer,
        ],
      };
      
    • Modify webpack.config.js:
      ...
      module.exports = {
          module: {
              rules: [
                  ...,
                  {
                      test: /\.css$/,
                      use: [
                      'vue-style-loader',
                      { loader: 'css-loader', options: { importLoaders: 1 } },
                      'postcss-loader'
                      ]
                  }
          ...
      
  8. Test tailwindcss by modifying App.vue:

    <template>
        <div class="bg-blue-100">Wele</div>
    </template>
    

    → Failed: Background of "Wele" text should be blue, but isn't, text is still serif.

Share Improve this question asked Aug 18, 2020 at 13:16 YannicYannic 82610 silver badges25 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 9

Outdated packages/plugins/repos are mostly developer's dilemma. There could be other choices out there that is being maintained regularly, but what if we can’t find something to meet our needs… ¯_(ツ)_/¯

Anyway, I remend using Vue-CLI instead, and use vue plugins along the way, such as electron and tailwind.

  1. Vue-CLI uses webpack under the hood, by adding/configuring your vue.config.js. You can go ahead and install it: yarn global add @vue/cli.

  2. Create a project with vue-cli: vue create myproject. Then

cd myproject
yarn install
  1. Add Vue CLI Plugin Electron Builder plugin, that will build your VueJS app as a desktop app. Install with vue add electron-builder. Choose electron version. And test run with yarn electron:serve.

  2. Thereafter, you can add the tailwindcss plugin via vue add tailwind. Along the installation, you’ll be prompted with the tailwind config generation, choose full so you can test everything after, then customize later.

Following all their installation process, and leave all the defaults as is, try to test if the tailwindcss is working:

/* in App.vue */

<template>
  <div id="app" class="flex p-5">Test</div>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style>
body, html {
  @apply bg-white;
}
</style>

finally with: yarn electron:serve

发布评论

评论列表(0)

  1. 暂无评论