Use webpack.config provided by vue-cli

Hey there,

is there any chance to enable Webstorm to use the webpack.config.js provided by vue-cli? Since there is no webpack.config.js Webpack can't resolve relative SASS imports like @import '~/styles/fonts.scss' and is showing error messages.


For Vue-cli 3.x, you have to specify node_modules/@vue/cli-service/webpack.config.js. as Preferences | Languages & Frameworks | JavaScript | Webpack

For Vue-cli 3.x, you have to specify node_modules/@vue/cli-service/webpack.config.js. as Preferences | Languages & Frameworks | JavaScript | Webpack


Just want to expand on this answer, by marking my src folder as resource route worked for me...

PS: mark your root folder after adding the path to webpack config otherwise it wont work


Well, seems to be pretty straight forward. Anyways will WebStorm be able to resolve custom configuration through a modified Vue-CLI config?


Not sure; it depends on a way you modify it, etc.


You normally don't need marking any folders in a special way to make this work...

What IDE version do you work with? Can you share a sample project that shows up the issue? Is it JavaScript or TypeScript project?


@Elena: setting the 

node_modules/@vue/cli-service/webpack.config.js. under File > Settings... > Languages & Frameworks > JavaScript > Webpack

does not work for me.

The only way to get aliases to work is creating a webpack.config.js file that has the alias defined in it or marking the src directory as resource root.

module.exports = {
  resolve: {
    alias: {
      "@": require("path").resolve(__dirname, "src")

I'm running Webstorm version 2018.3.

Any idea why this isn't working for me?


No idea, sorry. Can you share a project that shows up the issue plus your idea.log?


Please sign in to leave a comment.