VS 2017编译SCSS时如何包含node_modules？

嘿，我来帮你搞定这个SCSS导入报错的问题！针对你的疑问，我整理了可行的解决方案：

能否将wwwroot/node_modules/添加到compilerconfig.json？ #

当然可以！Web Compiler支持通过includePaths配置项指定SCSS的查找路径，你只需要在compilerconfig.json中为你的SCSS编译任务添加这个属性即可。

示例配置：

[
  {
    "inputFile": "wwwroot/css/site.scss",
    "outputFile": "wwwroot/css/site.css",
    "includePaths": ["wwwroot/node_modules/"]
  }
]

添加后，SCSS编译器会自动在wwwroot/node_modules/目录下查找你通过@import引用的模块，这样就能解决「File to import not found or unreadable」的错误了。

其他可选解决办法 #

除了配置路径，还有几种方式可以解决这个问题：

• 使用相对路径直接导入：如果你的目录结构固定，可以直接用相对路径指向模块文件，比如：

  @import "../node_modules/@material/button/mdc-button";
  

  这种方式不需要修改配置，但如果后续目录结构变动，需要同步调整路径。

• 确认模块安装位置：检查@material/button是否确实安装在wwwroot/node_modules/下。如果之前是全局安装或者安装到了项目根目录的node_modules，可以用以下命令重新安装到指定位置：

  npm install @material/button --prefix wwwroot
  

• 全局配置includePaths：如果你有多个SCSS文件需要编译，可以在compilerconfig.json的根级别配置全局路径，让所有编译任务共享：

  {
    "compilers": {
      "scss": {
        "includePaths": ["wwwroot/node_modules/"]
      }
    },
    "files": [
      {
        "inputFile": "wwwroot/css/site.scss",
        "outputFile": "wwwroot/css/site.css"
      }
    ]
  }
  

• 检查导入语法细节：有些情况下，需要明确指定文件后缀名，比如尝试：

  @import "@material/button/mdc-button.scss";
  

  部分包可能没有在package.json中配置正确的style入口，添加后缀可以帮助编译器准确定位文件。

内容的提问来源于stack exchange，提问作者Jan Zahradník