新建.scss文件无法被网站识别的问题求助

你遇到的问题很典型——Simplefolio这类SCSS模板是靠主入口文件统一导入所有子SCSS文件来编译的，新建文件没被识别，根本原因是没把它加入编译流程，和npm start或npm install的前置配置没关系，按下面几步操作就能解决：

• 找到主SCSS入口文件
  打开项目里的src/scss/main.scss（或者叫style.scss，看模板实际结构），里面能看到一堆@import语句，就是用来导入原有组件样式的。

• 导入你的新建文件
  把你新建的_filename.scss（SCSS里带下划线的是局部文件，导入时不用写下划线和.scss后缀）加到主文件的@import列表里，比如：

  // 按你文件的实际路径调整，比如放在components文件夹下就这么写
  @import "components/filename";
  

  注意路径要和原有导入的格式保持一致，别写错层级。

• 重启本地服务
  改完主文件后，关掉当前的npm start服务，重新运行npm start，新的SCSS样式就会被编译生效了。

额外提两点：

1. SCSS的下划线命名是规范，这类文件不会被单独编译，必须通过主文件导入才能起作用，这是你新建文件没生效的核心原因。
2. 不需要重新执行npm install，你只是加了个样式文件，没新增依赖包，没必要跑这个命令。

内容的提问来源于stack exchange，提问作者Nishant Jha