Webpack构建React项目时无法识别Sass的@functions问题

我之前在React项目里用SCSS开发时也碰到过一模一样的问题，给你几个实用的解决方向：

1. 确认SCSS相关依赖安装完整且正确 #

Webpack处理SCSS需要几个核心loader，而且现在node-sass已经被废弃，一定要用dart-sass（也就是npm包sass）。先检查你的依赖：

• 安装必要包：

  npm install sass sass-loader css-loader style-loader --save-dev
  # 或者用yarn
  yarn add sass sass-loader css-loader style-loader -D
  

2. 修正Webpack配置中的SCSS规则 #

确保你的webpack配置文件里正确配置了SCSS的loader链，并且指定了sass的实现为dart-sass。这里给你一个完整的配置示例：

module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        // 匹配.scss和.sass文件
        test: /\.s[ac]ss$/i,
        use: [
          // 开发环境用style-loader把样式注入DOM，生产环境建议用MiniCssExtractPlugin提取独立CSS文件
          process.env.NODE_ENV === 'production' 
            ? require('mini-css-extract-plugin').loader 
            : 'style-loader',
          // 解析CSS中的import和url等
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // 指定使用dart-sass
              implementation: require('sass'),
              // 如果你的调色板/函数文件需要全局可用，用additionalData自动注入到每个SCSS文件开头
              additionalData: `@import "./src/styles/palette.scss";`,
            },
          },
        ],
      },
    ],
  },
};

如果你的自定义@functions是写在单独的文件里，additionalData能帮你避免在每个SCSS文件里手动导入，确保函数全局可访问。

3. 检查SCSS函数的语法完整性 #

从你提供的调色板代码来看，最后一行mid-dark: darken($...是截断状态，要确保所有SCSS函数（不管是内置的还是自定义的）语法正确：

• 内置函数（比如lighten/darken）是sass自带的，只要依赖正确就应该能识别；
• 如果是你自己定义的@functions，要确保函数定义完整，比如：

  @function custom-lighten($color, $percentage) {
    @return lighten($color, $percentage);
  }
  

4. 清除缓存并重启Webpack #

有时候Webpack的缓存会导致一些奇怪的解析问题，试试：

• 运行npx webpack --clear-cache清除编译缓存；
• 如果用的是webpack-dev-server，直接重启服务，或者删掉项目里的.cache目录（通常在node_modules下）。

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