I’m having trouble getting Brunch to build VueJS components after moving to Phoenix 1.3.
I’ve generated a new project.
I’ve installed vue-brunch integration using NPM: (Found here: https://github.com/nblackburn/vue-brunch.git”
I’ve updated the brunch-config.js to build Vue components like so (I tried both paths to components.css):
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
vue: {
extractCSS: true,
out: 'priv/static/css/components.css'
// out: '../priv/static/css/components.css'
}
},
I’ve added a component to “assets/components/my-app.vue”.
But after building the project “components.css” does not show up in, “priv/static/css/”.
I’ve tried updating Brunch. No luck.
What did I miss?
For more context, the full brunch-config.js file:
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
// To use a separate vendor.js bundle, specify two files path
// http://brunch.io/docs/config#-files-
// joinTo: {
// "js/app.js": /^js/,
// "js/vendor.js": /^(?!js)/
// }
//
// To change the order of concatenation of files, explicitly mention here
// order: {
// before: [
// "vendor/js/jquery-2.1.1.js",
// "vendor/js/bootstrap.min.js"
// ]
// }
},
stylesheets: {
joinTo: "css/app.css"
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/assets/static". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(static)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: ["static", "css", "js", "vendor"],
// Where to compile files to
public: "../priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
vue: {
extractCSS: true,
out: 'priv/static/css/components.css'
}
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true
}
};
brunch build --debug output
$ brunch build --debug
brunch:config Trying to load brunch-config +0ms brunch:plugins Loaded plugins: babel-brunch +690ms brunch:watch add package.json +28ms brunch:watch add brunch-config.js +0ms brunch:watch add static/favicon.ico +5ms brunch:list Reading static/favicon.ico +1ms brunch:watch add static/robots.txt +0ms brunch:list Reading static/robots.txt +0ms brunch:watch add css/app.css +1ms
brunch:list Reading css/app.css +0ms brunch:watch add css/phoenix.css +1ms brunch:list Reading css/phoenix.css +0ms
brunch:watch add js/app.js +0ms brunch:list Reading js/app.js +0ms
brunch:watch add js/socket.js +0ms brunch:list Reading js/socket.js +0ms brunch:asset Init asset static/favicon.ico +3ms brunch:list Compiled static/favicon.ico +4ms brunch:asset Init asset static/robots.txt +0ms brunch:list Compiled static/robots.txt +0ms
brunch:file Init file css/app.css +1ms brunch:list Compiled css/app.css +3ms brunch:file Init file js/app.js +0ms
brunch:pipeline Compiling js/app.js @ babel-brunch +1ms brunch:file Init file js/socket.js +254ms brunch:pipeline Compiling js/socket.js @ babel-brunch +0ms brunch:file Init file css/phoenix.css +55ms
brunch:list Compiled css/phoenix.css +1ms brunch:watch add static/images/phoenix.png +3ms brunch:list Reading static/images/phoenix.png +0ms brunch:asset Init asset static/images/phoenix.png +8ms brunch:list Compiled static/images/phoenix.png +0ms brunch:list Reading node_modules/phoenix/priv/static/phoenix.js +9ms brunch:list Compiled js/socket.js +2ms brunch:file Init file node_modules/phoenix/priv/static/phoenix.js +1ms brunch:list Compiled node_modules/phoenix/priv/static/phoenix.js +63ms
brunch:list Reading node_modules/phoenix_html/priv/static/phoenix_html.js +8ms
brunch:list Reading ../node_modules/vue/dist/vue.runtime.common.js > +0ms brunch:list Reading components/my-app.vue +0ms brunch:list Compiled js/app.js +1ms brunch:file Init file node_modules/phoenix_html/priv/static/phoenix_html.js +0ms
> brunch:file Init file components/my-app.vue +2ms brunch:list > Compiled components/my-app.vue +0ms brunch:file Init file ../node_modules/vue/dist/vue.runtime.common.js +1ms brunch:list Compiled node_modules/phoenix_html/priv/static/phoenix_html.js +6ms
brunch:list Reading node_modules/process/browser.js +98ms
brunch:list Compiled ../node_modules/vue/dist/vue.runtime.common.js +20ms brunch:file Init file node_modules/process/browser.js +0ms brunch:list Compiled node_modules/process/browser.js +9ms
brunch:write Writing 2/2 files +75ms brunch:generate Concatenating [../node_modules/vue/dist/vue.runtime.common.js, node_modules/phoenix/priv/static/phoenix.js, node_modules/phoenix_html/priv/static/phoenix_html.js, node_modules/process/browser.js, js/app.js, js/socket.js] => ../priv/static/js/app.js +4ms brunch:generate Concatenating [css/app.css, css/phoenix.css] => ../priv/static/css/app.css +40ms
brunch:generate Writing ../priv/static/js/app.js +4ms
brunch:generate Writing ../priv/static/js/app.js.map +7ms
brunch:generate Writing ../priv/static/css/app.css +1ms
brunch:generate Writing ../priv/static/css/app.css.map +0ms
brunch:write Writing 3/3 assets, removing 0 +62ms brunch:generate Writing ../priv/static/favicon.ico +0ms brunch:generate Writing ../priv/static/robots.txt +1ms brunch:generate Writing ../priv/static/images/phoenix.png +2ms 15:04:33 - info: compiled 8 files into 2 files, copied 3 in 2.1 sec
I'm assuming your brunch-config.js is in the assets folder, this means that the priv folder is one level above the config file. Change the vue configuration to the following:
vue: {
extractCSS: true,
out: "../priv/static/css/components.css"
}