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


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.

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


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.