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.
Please sign in to leave a comment.
For Vue-cli 3.x, you have to specify
node_modules/@vue/cli-service/webpack.config.js
. as Preferences | Languages & Frameworks | JavaScript | WebpackWell, 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.
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
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.
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?
Specified this path in Languages & Frameworks > JavaScript > Webpack worked for me 🎉
/Users/<path-to-project>/node_modules/@vue/cli-service/webpack.config.js
How to do that in a multi-module project with no global node_modules directory? Is it okay to have a webpack.config.js in the root project that has no other purpose than telling the IDE where the source directories are? (Althoug this would mean I could reference components from other modules that may not be available in the current)
>Is it okay to have a webpack.config.js in the root project that has no other purpose than telling the IDE where the source directories are?
yes, dummy config is a good solution; but note that all paths specified there should be valid, they have to be resolved during evaluation, the aliases, etc. won't work otherwise
I was able to fix my issue with a `jsconfig.json` file in my projects directory.