使用Webpack4编译Sass时导入的Mixin无法识别，构建报错

看起来你遇到的核心问题是：在components.scss里调用@include radi(10px)时，Sass找不到对应的mixin定义，导致编译失败。下面是一步步的排查和解决方法：

1. 优先检查Mixin的定义与手动导入 #

这是最常见的原因——你使用的radi mixin要么没被定义，要么没被正确导入到当前SCSS文件中：

• 首先确认你有一个包含mixin定义的SCSS文件（通常这类复用文件会以下划线开头，比如_mixins.scss），示例定义：

  // src/sass/_mixins.scss
  @mixin radi($radius) {
    border-radius: $radius;
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
  }
  

• 然后在components.scss的最顶部，通过@import导入这个文件，注意路径要准确（Sass会自动识别下划线和.scss后缀，所以可以省略）：

  // src/sass/components.scss
  @import './mixins'; // 和当前文件同目录的话用相对路径即可
  
  .your-component {
    @include radi(10px);
  }
  

2. 配置全局导入（避免手动重复import） #

如果你不想在每个SCSS文件里都手动导入mixin文件，可以通过sass-loader的配置实现全局自动导入：
在你的Webpack配置文件中，给sass-loader添加data（对应Webpack4 + sass-loader < v9版本，若用更高版本则替换为additionalData）选项：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // 用绝对路径更稳妥，避免相对路径出错
              data: `@import "${path.resolve(__dirname, 'src/sass/mixins')}";`
            }
          }
        ]
      }
    ]
  },
  plugins: [new MiniCssExtractPlugin()]
};

3. 排查路径与命名错误 #

• 检查mixin文件的文件名是否拼写正确（比如是不是写成了_mixin.scss少了个s）
• 确认@import的相对路径是否正确，比如如果_mixins.scss在src/sass/utils/目录下，路径应该是@import './utils/mixins';

4. 清理缓存重新构建 #

有时候Webpack的缓存会残留旧的构建状态，导致新的导入不生效。可以尝试：

• 删除项目根目录下的node_modules/.cache文件夹
• 执行webpack --no-cache命令强制不使用缓存重新构建

额外注意版本兼容性 #

Webpack 4建议搭配对应版本的依赖：

• sass-loader推荐使用v8.x版本
• node-sass推荐使用v4.x或v5.x（注意和你的Node.js版本匹配：v4对应Node.js 14及以下，v5对应Node.js 12-16）

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