配置Webpack集成Sass时遇[contenthash]路径变量未实现错误

Hey，这个错误我之前帮朋友排查过，大概率是你用错了插件或者配置位置导致的，咱们一步步来解决：

问题根源 #

你看到的Error: Path variable [contenthash] not implemented in this context: [name].[contenthash].css，核心原因是你在不支持[contenthash]的场景里用了这个占位符，最常见的情况就是还在使用旧版的extract-text-webpack-plugin来提取CSS——这个插件在Webpack 4及以上版本已经被弃用了，它不支持contenthash这个新的哈希占位符。

当然也有可能是Webpack版本太低（比如3.x及以下），或者你把[contenthash]用在了错误的配置项里。

具体解决办法 #

方法1：换成官方推荐的mini-css-extract-plugin（优先选这个） #

Webpack 4+官方推荐用mini-css-extract-plugin来提取CSS，它原生支持contenthash，步骤很简单：

1. 先安装插件：

yarn add mini-css-extract-plugin --dev

2. 修改你的Webpack配置文件：

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

module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 把原来的style-loader换成MiniCssExtractPlugin的loader
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      // 这里放心用[contenthash]就行
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
    }),
  ],
};

方法2：检查Webpack版本和配置位置 #

如果不想换插件，那先确认你的Webpack版本：

webpack -v

如果是3.x及以下，[contenthash]还没被支持，要么升级到Webpack 4+，要么把[contenthash]换成老的[hash]或者[chunkhash]（不过这俩不如contenthash精准，因为是全局或chunk级别的哈希）。

另外要注意：[contenthash]只能用在内容独立的文件输出配置里，比如提取后的CSS、拆分后的JS chunk，别乱放在其他不相关的配置项里。

方法3：临时替换哈希占位符（应急用） #

如果暂时没法升级或换插件，先把[contenthash]换成[hash]救急：

// 临时修改文件名规则
filename: '[name].[hash].css',

不过这个方案不推荐长期用，因为[hash]会在任何文件改动时都变，没法利用缓存优势。

验证修改 #

改完配置后，重新跑一下Webpack命令试试：

yarn run webpack --config webpack.config.js --mode development

应该就能正常编译Sass文件了～

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