无法在theme.scss中导入node_modules内CSS文件，报错文件不存在求助

嘿，这个问题我之前踩过坑！你遇到的错误是因为Sass的@import规则在处理文件时的默认行为——它会把你导入的.css文件当成Sass模块来解析，自动给文件名追加.scss后缀，所以才会找不到superfish.css.scss这种不存在的文件。下面给你几个可行的解决方案：

方案一：使用原生CSS的@import url()语法 #

直接用url()包裹文件路径，这样Sass会直接输出原生的CSS导入语句，不会尝试把文件当作Sass模块处理：

@import url("../../node_modules/superfish/dist/css/superfish.css");

这种方法不需要依赖任何构建工具，纯Sass语法就能解决问题。

方案二：利用构建工具的模块解析（推荐） #

如果你用的是Webpack、Vite这类支持模块解析的构建工具，可以用~符号直接指向node_modules目录，写法更简洁，同时避免Sass的后缀自动追加问题：

@import "~superfish/dist/css/superfish.css";

构建工具会自动识别~并定位到node_modules里的目标文件，Sass也不会乱加后缀了。

方案三：配置Sass的includePaths（适合复杂项目） #

你可以在Sass编译器的配置里把node_modules添加到includePaths中，这样就能直接省略冗长的相对路径：
比如在Webpack的sass-loader配置中添加：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['node_modules']
            }
          }
        ]
      }
    ]
  }
};

配置完成后，你就可以这样导入：

@import "superfish/dist/css/superfish.css";

根据你的项目环境选一个最适合的方案就行，一般方案一或方案二就能快速解决问题。

内容的提问来源于stack exchange，提问作者Ankit Parmar