在ASP.NET Core2/Angular5项目中配置Sass遇matchMedia未定义错误求助

这个错误其实和你配置Sass/SCSS的操作没有直接关系——它是因为matchMedia是浏览器原生API，而在webpack构建过程或者服务端渲染（如果你的项目用到了）的Node.js环境中，这个API并不存在，导致代码执行时抛出未定义的异常。下面是几种靠谱的解决方法：

方法一：引入matchMedia polyfill #

这是最直接的方案，通过安装polyfill来在非浏览器环境中模拟这个API：

1. 首先安装依赖：

   npm install matchmedia-polyfill --save-dev
   

2. 在你的Angular项目的src/polyfills.ts文件顶部添加以下导入语句：

   // 引入matchMedia polyfill及监听方法
   import 'matchmedia-polyfill';
   import 'matchmedia-polyfill/matchMedia.addListener';
   

3. 重新启动你的开发服务器，这个错误应该就会消失了。

方法二：修改webpack配置来模拟环境 #

如果polyfill方案不生效，你可以直接在webpack配置中对Node.js环境进行配置，让它识别matchMedia：
打开你的webpack.config.js，在module.exports对象中添加node配置项：

module.exports = {
  // 其他现有配置...
  node: {
    global: true,
    process: true,
    // 其他需要模拟的浏览器API...
    matchMedia: true
  }
}

或者你也可以使用webpack的ProvidePlugin来全局注入polyfill：

const webpack = require('webpack');

module.exports = {
  // 其他现有配置...
  plugins: [
    // 其他插件...
    new webpack.ProvidePlugin({
      matchMedia: 'matchmedia-polyfill'
    })
  ]
}

方法三：在组件中做兼容性判断 #

为了更稳妥，你可以在使用matchMedia的sidenav.component.ts中先判断这个API是否存在，再执行相关逻辑：

// 示例代码
if (typeof matchMedia !== 'undefined') {
  const mediaQuery = matchMedia('(max-width: 768px)');
  // 你的媒体查询逻辑...
} else {
  // 非浏览器环境下的 fallback 逻辑
}

额外提示 #

如果你的项目使用了Angular Universal（服务端渲染），还需要在服务端入口文件（比如server.ts）中引入polyfill，或者使用jsdom来模拟完整的浏览器DOM环境，这样才能确保服务端渲染时不会出现类似的API缺失问题。

内容的提问来源于stack exchange，提问作者Efron A.