WebStorm 无法解析 scss 导入答案

【问题标题】：WebStorm cannot resolve scss importsWebStorm 无法解析 scss 导入
【发布时间】：2020-02-11 10:32:22
【问题描述】：

WebStorm 2019.2 / Vue-CLI

带有 scss 导入的 App.vue 文件：

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

没有一个scss文件被成功解析：

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

更新 1

我去了 Preferences > Language & Frameworks / JavaScript / Webpack 并将路径设置为 /Users/alexanderkim/Sites/vueproject/node_modules/@vue/cli-service/webpack.config.js，仍然没有看到别名。

【问题讨论】：

标签： vue.js intellij-idea sass webstorm

【解决方案1】：

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


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

这是一个 sass-loader 功能，适用于 node_modules 和 webpack 别名。见https://webpack.js.org/loaders/sass-loader/#imports、webpack (with sass-loader) - scss file @import does not recognize resolve alias

【讨论】：

【解决方案2】：

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

【讨论】：

Tilda 适用于node_modules，但 vue-cli 工具中设置了“@”别名。