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.

7 comments

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

2

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

0

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

0
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

0

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?

0

@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?

0

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

0

Please sign in to leave a comment.