使用Vuejs，Webpack和tailwindcss创建Electron应用程序

编程问答 2022-08-16

问题描述

我尝试让webpack，Vuejs和tailwindcss的Electron应用运行，从electron-webpack模板包开始，然后添加Vuejs和tailwindcss，但是tailwindcss没有不行。

SO上有equivalent thread，但其中提到的解决方案使用electron-vue，它有200多个未解决的问题，而且似乎不再维护。

有人知道这里出了什么问题吗？我进行如下操作：

  1. 初始化Electron Webback样板（根据here）：

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

  2. 安装Vuejs：

    yarn add --dev vue css-loader vue-loader vue-template-compiler

  3. 为Vuejs设置Webpack：

    const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,use: 'vue-loader'
            }
        ],plugins: [
            new VueLoaderPlugin()
        ]
    }
}

  4. 通过将src/renderer/index.js修改为以下内容来测试Vuejs：

    'use strict';
import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',render(h) {
        return h(App)
    }
})

    并添加src/renderer/App.vue：

    <template>
    <div>Welcome</div>
</template>

    →到目前为止有效。

  5. 安装tailwindcss：

    yarn add —-dev tailwindcss postcss-loader autoprefixer

  6. 向项目中添加tailwindcss：

    • src/renderer/index.js： 
      ...
import './assets/styles.css';
...
    • src/assets/styles.css： 
      @tailwind base;
@tailwind components;
@tailwind utilities;

  7. 将postcss-loader包含到Webpack中：

    • 添加postcss.config.js： 
      const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,autoprefixer,],};
    • 修改webpack.config.js： 
      ...
module.exports = {
    module: {
        rules: [
            ...,{
                test: /\.css$/,use: [
                'vue-style-loader',{ loader: 'css-loader',options: { importLoaders: 1 } },'postcss-loader'
                ]
            }
    ...

  8. 通过修改App.vue测试tailwindcss：

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

    →失败：“欢迎”文本的背景应为蓝色，但不是，文本仍为衬线。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascripttailwind-cssvue.jswebpackwebpackwebpack