WebStorm 无法解析 scss 导入

Question

WebStorm 2019.2/Vue-CLI

App.vue 包含 scss 导入的文件：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';
@import '@/assets/scss/app.scss';
</style>

None 个 scss 文件已成功解析：

我已经尝试将我的 src 文件夹设置为资源根目录 - 没有效果。我认为 WS 可以很好地处理任何与前端相关的开箱即用的东西……因为 VSCode 可以。这是一个错误吗？或者我做错了什么。

更新 1

我转到首选项 > 语言和框架/JavaScript/Webpack 并将路径设置为 /Users/alexanderkim/Sites/vueproject/node_modules/@vue/cli-service/webpack.config.js，仍然没有看到一个别名。

Answer 1

您是否尝试过将带有“~”的路径设置为节点模块？而且，要使用“@”别名，您应该在 webpack.config 中设置它 see here

Answer 2

请尝试在导入路径前加上 tilda:


@import '~@/assets/scss/app.scss';

这是一个 sass-loader 特性，适用于 node_modules 和 webpack 别名。参见 https://webpack.js.org/loaders/sass-loader/#imports,

WebStorm 无法解析 scss 导入

WebStorm cannot resolve scss imports

sass

intellij-idea

webstorm

vue.js