Angular 6中使用~导入SCSS默认查找node_modules问题求助

你的问题核心在于Angular对~符号的解析逻辑：它默认只会指向node_modules目录，所以你写@import "~styles/variables"时，Angular会去node_modules/styles/下找文件，而不是你项目src/styles里的文件，这就是报错的原因。

下面给你两种可行的解决方案，不需要把styles文件夹复制到node_modules里：

方案1：配置stylePreprocessorOptions（推荐） #

你可以在angular.json的项目配置中，把src/styles目录添加到SCSS预处理器的搜索路径里，这样就能直接导入变量文件，不用写冗长的相对路径或者依赖~：

1. 打开项目根目录下的angular.json
2. 找到你项目的architect > build > options部分，添加stylePreprocessorOptions配置：

"build": {
  "options": {
    // 其他已有的配置...
    "stylePreprocessorOptions": {
      "includePaths": [
        "src/styles"
      ]
    }
  }
}

3. 保存文件后重启Angular开发服务器
4. 现在你可以在组件的SCSS文件里直接这样导入：

@import "variables";

方案2：利用TypeScript路径映射（结合~@前缀） #

如果你的项目已经配置了TypeScript的路径映射，也可以用~@来指向src目录：

1. 打开tsconfig.json，确保compilerOptions里有baseUrl和paths配置：

"compilerOptions": {
  "baseUrl": "./",
  "paths": {
    "@/*": ["src/*"]
  }
}

2. 然后在组件SCSS里可以这样导入：

@import "~@/styles/variables";

这两种方法都能解决你遇到的问题，而且比复制文件夹到node_modules更规范，也方便维护。你提到用相对路径可行，说明文件本身没问题，只要调整路径解析的配置就能解决啦。

内容的提问来源于stack exchange，提问作者Asaad Mahmood