Making webpacker aware of vue.config.js

[gkatsanos]

Several Vue libraries and vue itself recommend a vue.config.js file as a means to pass configuration options to Webpack.
I can't figure out how to make webpack aware of the file (or, where to place it)
My structure is

app/javascript/manager/styles
├── application.styl
├── flags.scss
└── main.scss

I tried putting vue.config.js in app.

[jakeNiemiec]

It seems that vue.config.js is meant to fill the same role as webpacker.yml. As in they both provide a "batteries included" way to configure webpack.

I don't think they are compatible since they compete to fill the same job (in different ways).

[gkatsanos]

Seems I was able to pass the config I wanted directly on the environment file that is passed to webpacker - but I would like to know how I can pass options to the base webpack config if I want to do more advanced stuff like tree shaking, code splitting and lazy loading..

[jakeNiemiec]

Glad it worked out. Tree shaking should be on by default to vanilla webpack.

You can find code splitting and lazy loading docs here.

[zeroedin]

@gkatsanos can you show a more detailed example of what you did to "pass the config directly on the environment". I'm not following what you did there.

My use case is trying to load a _variables.scss file for every component programmatically like described here https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/ but I can't seem to get webpacker aware of the vue.config.js in the root dir. Hoping what you figured out might help me.

[jonyhayama]

@zeroedin I know this is kind of an old issue, but just to let you know what I've found out :)

I don't know if you've ran into this issue, but it I've built on top of it and got the _variables.scss to "autoload".

here's the code I've added before module.exports = environment on the config/webpack/environment.js:

// Get the actual sass-loader config
const sassLoader = environment.loaders.get('sass')
const sassLoaderConfig = sassLoader.use.find(function(element) {
  return element.loader == 'sass-loader'
})

// Use Dart-implementation of Sass (default is node-sass)
const options = sassLoaderConfig.options
options.implementation = require('sass')
options.additionalData = `@import "@/../assets/scss/_variables.scss";`

[guillaumebriday]

I think you should mix Webpacker and vue.config.js, they achieve the same goal and would conflict. If you want to use Rails and Vue-cli you should try this https://github.com/guillaumebriday/rails-vue-cli