Sass中@use无法解析node_modules内modern-normalize路径的求助

• 问题根源：Sass原生不支持~这个路径别名，它是webpack等构建工具的专属语法，用来快速指向node_modules目录。VSCode能跳转是因为编辑器单独做了路径解析，但Sass编译工具不认这个符号，所以会提示找不到样式文件。

• 方案1：直接使用相对路径引入
  根据你的Sass文件所在位置，写清楚到modern-normalize文件的相对路径，比如你的Sass文件在src/styles目录下，就可以这么写：

  @use '../../node_modules/modern-normalize/modern-normalize' as *;
  

  路径层级根据实际项目结构调整即可。

• 方案2：配置Sass的加载路径（推荐）
  给Sass编译工具配置includePaths，把node_modules加入加载路径，这样就能省略冗长的相对路径：

  • 如果你用webpack + sass-loader，修改配置：

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

  • 配置完成后，直接简化引入语句：

    @use 'modern-normalize/modern-normalize' as *;
    

  • 要是用Vite，在vite.config.js里配置：

    import { defineConfig } from 'vite';
    
    export default defineConfig({
      css: {
        preprocessorOptions: {
          scss: {
            includePaths: ['./node_modules'],
          },
        },
      },
    });
    

• 方案3：检查文件类型并调整引入方式
  确认node_modules/modern-normalize里的主文件类型，如果是.css而非.scss，可以改用@import引入（不过更推荐用@use处理Sass模块，优先保证文件是Sass格式）：

  @import '../node_modules/modern-normalize/modern-normalize.css';
  

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