Vue 2 - Styles not rendering in app

[bondydaa]

I updated my repo so that we could use vue 2.0 which required a change the to build/webpack.dev-main.conf.js so that Vue would render our templates again. The app builds and will render html and JS but now no styles are being included and there are no errors being thrown in my shell or devtools/browser console.

Below you'll find my updated files and screenshots to hopefully help get you enough info but let me know if there is something else you need.

updated webpack.dev-main.conf.js:

var webpack = require('webpack')
var merge = require('webpack-merge')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackBaseConfig = require('./webpack.base.conf')
var config = require('../config')
var cssLoaders = require('./css-loaders')

var devServerUrl = 'http://localhost:' + config.dev.port + '/'

var webpackConfig = merge(webpackBaseConfig, {
  entry: {
    app: [
      './build/dev-client?path=' + devServerUrl + '__webpack_hmr&noInfo=true&reload=true',
      './app/main.js'
    ]
  },
  // eval-source-map is faster for development
  devtool: '#eval-source-map',
  output: {
    // necessary for the html plugin to work properly
    // when serving the html from in-memory
    // need to explicitly set localhost to prevent
    // the hot updates from looking for local files
    publicPath: devServerUrl
  },
  vue: {
    loaders: cssLoaders({
      sourceMap: false,
      extract: false
    })
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'main.html',
      template: './app/main.html',
      excludeChunks: ['devtools'],
      inject: true
    }),
    new webpack.IgnorePlugin(/vertx/)
  ],
  resolve: {
    alias: {vue: 'vue/dist/vue.js'}
  }
})

if (config.dev.vueDevTools) {
  webpackConfig.entry.app.unshift(
    './tools/vue-devtools/hook.js',
    './tools/vue-devtools/backend.js'
  )
  webpackConfig.entry.devtools = './tools/vue-devtools/devtools.js'

  webpackConfig.plugins.push(new HtmlWebpackPlugin({
    filename: 'devtools.html',
    template: './tools/vue-devtools/index.html',
    chunks: ['devtools'],
    inject: true
  }))
}

module.exports = webpackConfig

piece I added to get vue 2.0 to render properly:

resolve: {
    alias: {vue: 'vue/dist/vue.js'}
  }

package.json

{
  "scripts": {
    "postinstall": "cd app && npm install",
    "start": "node build/dev-runner.js",
    "dev:server": "node build/dev-server.js",
    "dev:client": "cross-env HOT=1 webpack --hide-modules --config build/webpack.dev-background.conf.js && cross-env HOT=1 electron",
    "build": "rimraf dist && mkdirp dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.prod.conf.js",
    "package": "node build/package.js",
    "package:osx": "node build/package.js --platform=darwin --arch=x64",
    "package:win": "node build/package.js --platform=win32",
    "package:linux": "node build/package.js --platform=linux",
    "release": "npm run build && npm run package",
    "unit": "karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-runtime": "^6.0.0",
    "chromedriver": "^2.21.2",
    "connect-history-api-fallback": "^1.1.0",
    "copy-webpack-plugin": "^1.1.1",
    "cross-env": "1.0.7",
    "cross-spawn": "^2.1.5",
    "css-loader": "^0.25.0",
    "debug-menu": "^0.3.0",
    "electron-packager": "^7.0.0",
    "electron-prebuilt": "1.1.0",
    "electron-rebuild": "^1.1.3",
    "es6-promise": "^3.2.1",
    "eslint": "^2.0.0",
    "eslint-config-standard": "^5.1.0",
    "eslint-friendly-formatter": "^1.2.2",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-html": "^1.3.0",
    "eslint-plugin-promise": "^1.0.8",
    "eslint-plugin-standard": "^1.3.2",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.0",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.11.0",
    "inject-loader": "^2.0.1",
    "isparta-loader": "^2.0.0",
    "jasmine-core": "^2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^0.13.15",
    "karma-coverage": "^0.5.5",
    "karma-electron-launcher": "^0.1.0",
    "karma-jasmine": "^0.3.6",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "^0.0.24",
    "karma-webpack": "^1.7.0",
    "mkdirp": "^0.5.1",
    "moment": "2.12.0",
    "ncp": "^2.0.0",
    "nightwatch": "^0.8.18",
    "phantomjs-prebuilt": "^2.1.3",
    "rimraf": "^2.5.0",
    "selenium-server": "2.52.0",
    "style-loader": "^0.13.1",
    "tree-kill": "^1.1.0",
    "url-loader": "^0.5.7",
    "vue": "^2.0.0",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^9.5.0",
    "vue-router": "^2.0.0-rc.3",
    "vue-server-renderer": "^2.0.0-rc.1",
    "vue-style-loader": "^1.0.0",
    "vuex": "^2.0.0-rc.4",
    "vuex-router-sync": "^3.0.0",
    "webpack": "1.12.2",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-externals-plugin": "1.0.0",
    "webpack-hot-middleware": "^2.6.0",
    "webpack-merge": "^0.8.3"
  }
}

installed packages:

npm list --depth=0
/Users/<myuser>/sites/<app>
├── autoprefixer@6.5.0
├── babel-core@6.17.0
├── babel-loader@6.2.5
├── babel-plugin-transform-runtime@6.15.0
├── babel-preset-es2015@6.16.0
├── babel-preset-stage-2@6.17.0
├── babel-runtime@6.11.6
├── chromedriver@2.24.1
├── connect-history-api-fallback@1.3.0
├── copy-webpack-plugin@1.1.1
├── cross-env@1.0.7
├── cross-spawn@2.2.3
├── css-loader@0.25.0
├── debug-menu@0.3.0
├── electron-packager@7.7.0
├── electron-prebuilt@1.1.0
├── electron-rebuild@1.2.1
├── es6-promise@3.3.1
├── eslint@2.13.1
├── eslint-config-standard@5.3.5
├── eslint-friendly-formatter@1.2.2
├── eslint-loader@1.5.0
├── eslint-plugin-html@1.5.3
├── eslint-plugin-promise@1.3.2
├── eslint-plugin-standard@1.3.3
├── eventsource-polyfill@0.9.6
├── express@4.14.0
├── extract-text-webpack-plugin@1.0.1
├── file-loader@0.9.0
├── html-webpack-plugin@2.22.0
├── http-proxy-middleware@0.11.0
├── inject-loader@2.0.1
├── isparta-loader@2.0.0
├── jasmine-core@2.5.2
├── json-loader@0.5.4
├── karma@0.13.22
├── karma-coverage@0.5.5
├── karma-electron-launcher@0.1.0
├── karma-jasmine@0.3.8
├── karma-sourcemap-loader@0.3.7
├── karma-spec-reporter@0.0.24
├── karma-webpack@1.8.0
├── mkdirp@0.5.1
├── moment@2.12.0
├── ncp@2.0.0
├── nightwatch@0.8.18
├── phantomjs-prebuilt@2.1.13
├── rimraf@2.5.4
├── selenium-server@2.52.0
├── style-loader@0.13.1
├── tree-kill@1.1.0
├── url-loader@0.5.7
├── vue@2.0.1
├── vue-hot-reload-api@1.3.3
├── vue-html-loader@1.2.3
├── vue-loader@9.5.1
├── vue-router@2.0.0
├── vue-server-renderer@2.0.1
├── vue-style-loader@1.0.0
├── vuex@2.0.0
├── vuex-router-sync@3.0.0
├── webpack@1.12.2
├── webpack-dev-middleware@1.8.3
├── webpack-externals-plugin@1.0.0
├── webpack-hot-middleware@2.13.0
└── webpack-merge@0.8.4

successful shell output:

npm start

> @ start /Users/<myuser>/sites/<app>
> node build/dev-runner.js

dev:client  > @ dev:client /Users/<myuser>/sites/<app>
            > cross-env HOT=1 webpack --hide-modules --config build/webpack.dev-background.conf.js && cross-env HOT=1 electron "/Users/<myuser>/sites/<app>/dist"

dev:server  > @ dev:server /Users/<myuser>/sites/<app>
            > node build/dev-server.js

dev:server  Listening at http://localhost:8080

dev:client  Hash: e8a00818127d912de9ee
            Version: webpack 1.12.2
            Time: 1124ms
                    Asset       Size  Chunks             Chunk Names
            background.js    5.63 kB       0  [emitted]  background
             package.json  280 bytes          [emitted]

dev:server  webpack: wait until bundle finished: /main.html

dev:server  webpack built 980a95d012d1a6313964 in 2316ms

dev:server  Hash: 980a95d012d1a6313964
            Version: webpack 1.12.2
            Time: 2316ms
                Asset       Size  Chunks             Chunk Names
               app.js    1.01 MB       0  [emitted]  app
            main.html  457 bytes          [emitted]
            Child html-webpack-plugin for "main.html":
                    Asset     Size  Chunks       Chunk Names
                main.html  20.9 kB       0
            webpack: bundle is now VALID.

main.js:

require('es6-promise').polyfill();
import Vue from 'vue';
import App from './App';
import store from './store';

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  components: { App }
});

App.vue:

<template>
  <div>
    <NavBar></NavBar>
    <SecretList></SecretList>
  </div>
</template>

<script>
  import NavBar from './components/navbar';
  import SecretList from './components/secret-list';

  export default {
    components: {
      NavBar,
      SecretList
    }
  };
</script>

<style>
  html {
    height: 100%;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: blue;
  }
  #app {
    margin-top: -100px;
    max-width: 600px;
    font-family: Helvetica, sans-serif;
    text-align: center;
  }
</style>

screenshot of electron after build, as you can see body should have a blue background based on above and there are no <style> tags in the head:

It seems like a webpack/loader issue but I'm not familiar enough with either of those and it looks like all of the vue-loader/vue-style-loader docs use webpack2 which I've already found out isn't the easiest thing to upgrade to.

Any help/guidance would be greatly appreciated.

[bradstewart]

If you haven't figured it out already....I have no idea off the top of my head, nothing is jumping out at me though. I've only just started using Vue 2, so I'm unsure how the template compiler and loaders have changed. Will let you know what I see when I start upgrading to Vue 2.

[bondydaa]

I wasn't able to find out what the issue was. My best guess is there was some type of incompatibility for vue2 compilers and webpack 1.

Most other vue 2 examples I saw around used webpack 2. I tried to take the webpack config you have setup to use it with webpack 2 but that didn't work at all 😦 .

Unfortunately, I'm no longer able to work on the project I was on (changed jobs) but if I start another electron based project I'll most likely stick with your boilerplate and see if I can help out.

[bradstewart]

Alrighty, thanks for the update. I'm closing for now, but feel free to reopen it if arises again in the future.

[rumanHuq]

Having the same trouble. In case, you have figured out... please share how ? :)