Nuxt 2项目编译失败：postcss-preset-env报错及模块缺失求助

一、postcss-preset-env警告：Unknown feature: "customProperties" #

这个警告是因为postcss-preset-env的特性名称拼写错误——正确写法是custom-properties（短横线分隔），而非驼峰式的customProperties。

解决步骤：

• 打开项目根目录的nuxt.config.js，找到build.postcss配置段
• 如果手动配置了postcss-preset-env的features，把customProperties改成custom-properties，示例：

  build: {
    postcss: {
      plugins: {
        'postcss-preset-env': {
          features: {
            'custom-properties': true // 修正拼写
          }
        }
      }
    }
  }
  

• 若未手动配置，可能是依赖版本不兼容，锁定postcss-preset-env到适配Nuxt 2的版本：

  npm install postcss-preset-env@^6.7.0 --save-dev
  

二、模块找不到错误：./index.vue的scss style模块缺失 #

这个问题大多和Sass loader版本不兼容、依赖缺失或文件路径错误有关，Nuxt 2基于Webpack 4，需要对应版本的loader支持。

解决步骤：

• 安装适配Nuxt 2的sass-loader版本（推荐10.x，高版本适配Webpack 5，和Nuxt 2不兼容）：

  npm install sass-loader@^10.4.1 --save-dev
  

• 检查pages/my_path/_slug/index.vue文件：
  • 确认<style>标签的lang="scss"属性无拼写错误
  • 若有引入外部SCSS文件，核对相对路径是否正确
• 清理缓存后重新编译：

  rm -rf node_modules .nuxt package-lock.json
  npm install
  npm run dev
  

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