uni-app prettier@3和sass冲突

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app prettier@3和sass冲突

操作步骤：

  1. 执行 vue create -p dcloudio/uni-preset-vue test 创建默认项目
  2. 执行 pnpm add -D prettier sass sass-loader@10.5.0 添加prettier和sass依赖
  3. 在App.vue的style加上 lang="scss"
  4. 执行 pnpm dev:h5 启动项目

预期结果：

无报错，正常启动

实际结果：

输入了如下报错：

ERROR in ./src/App.vue?vue&type=template&id=472cff63& (./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??clonedRuleSet-42[0].rules[0].use[0]!./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/filter-modules-template.js!./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader/index.js!./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/wrap-loader/index.js??clonedRuleSet-45[0].rules[0].use!./src/App.vue?vue&type=template&id=472cff63&)
1:8  
Module parse failed: Unexpected token (1:8)  
File was processed with these loaders:  
* ./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js  
* ./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js  
* ./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/filter-modules-template.js  
* ./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js  
* ./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js  
* ./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader/index.js  
* ./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/wrap-loader/index.js  
You may need an additional loader to handle the result of these loaders.  
> [object Promise]  
| export { render, staticRenderFns, recyclableRender, components }  
@ ./src/App.vue?vue&type=template&id=472cff63& 1:0-1576 1:0-1576  
@ ./src/App.vue 1:0-112 12:2-8 13:2-17 19:2-12 34:66-39:5 36:16-22 37:25-40 34:4-39:6  
@ ./src/main.js 9:0-24 12:0-10 13:36-39  

ERROR in ./src/pages/index/index.vue?vue&type=template&id=57280228&scoped=true& (./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??clonedRuleSet-42[0].rules[0].use[0]!./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/filter-modules-template.js!./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader/index.js!./src/pages/index/index.vue?vue&type=template&id=57280228&scoped=true&)
1:8  
Module parse failed: Unexpected token (1:8)  
File was processed with these loaders:  
* ./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js  
* ./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js  
* ./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/filter-modules-template.js  
* ./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js  
* ./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js  
* ./node_modules/.pnpm/@dcloudio+vue-cli-plugin-uni@2.0.2-3090820231124001_copy-webpack-plugin@11.0.0_postcss@8.4.32/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader/index.js  
You may need an additional loader to handle the result of these loaders.  
> [object Promise]  
| export { render, staticRenderFns, recyclableRender, components }  
@ ./src/pages/index/index.vue?vue&type=template&id=57280228&scoped=true& 1:0-1404 1:0-1404  
@ ./src/pages/index/index.vue 1:0-126 12:2-8 13:2-17 19:2-12 34:80-39:5 36:16-22 37:25-40 34:4-39:6  
@ ./src/pages.json 69:21-90  
@ ./src/main.js 6:0-19  

webpack 5.89.0 compiled with 2 errors in 5333 ms  
Error: getaddrinfo ENOTFOUND 96f0e31-f37a-48ef-84c7-2023f6360c0a.bspapp.com  
at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:109:26) {  
errno: -3008,  
code: 'ENOTFOUND',  
syscall: 'getaddrinfo',  
hostname: '96f0e031-f37a-48ef-84c7-2023f6360c0a.bspapp.com'  
}

bug描述：

prettier更新到了v3版本，如果项目安装了v3依赖，会导致报错，从报错信息看起来是会找不到sass-loader


2 回复

复现了此问题，我追踪下这个问题


在使用 uni-app 开发时，如果你同时使用了 Prettier[@3](/user/3) 和 Sass，可能会遇到一些冲突或格式化问题。以下是一些常见的冲突及其解决方法：

1. Prettier 格式化 Sass 文件时出现问题

  • 问题描述：Prettier 可能会对 .scss 或 .sass 文件进行不正确的格式化，例如缩进、括号、分号等。
  • 解决方法：
    1. 确保安装了 prettier-plugin-sass 插件：
      npm install prettier-plugin-sass --save-dev
    2. 在 .prettierrc 配置文件中启用插件：
      {
  "plugins": ["prettier-plugin-sass"]
}
    3. 如果问题仍然存在，可以尝试在 .prettierignore 文件中忽略 .scss 或 .sass 文件，手动处理这些文件的格式化。

2. Prettier 和 Sass 的缩进规则冲突

  • 问题描述：Prettier 默认使用 2 个空格缩进，而 Sass 可能使用 4 个空格或其他缩进规则。
  • 解决方法：
    1. 在 .prettierrc 中统一缩进规则：
      {
  "tabWidth": 2 // 或 4，根据项目需求
}
    2. 在 .sass-lint.yml 或 .stylelintrc 中配置 Sass 的缩进规则，确保与 Prettier 一致。

3. Prettier 和 Sass 的语法冲突

  • 问题描述：Prettier 可能会对 Sass 的嵌套语法、变量声明等格式进行不兼容的处理。
  • 解决方法：
    1. 在 .prettierrc 中禁用对 Sass 文件的格式化：
      {
  "overrides": [
    {
      "files": "*.scss",
      "options": {
        "parser": "scss"
      }
    }
  ]
}
    2. 使用 stylelint 或 sass-lint 来专门处理 Sass 文件的格式化和校验。

4. Prettier@3 的默认行为与 Sass 不兼容

  • 问题描述：Prettier@3 可能对某些语法（如 @import、@mixin 等）进行不兼容的格式化。
  • 解决方法：
    1. 降级到 Prettier@2，或者使用 prettier-plugin-sass 插件。
    2. 在 .prettierrc 中配置 parser 为 scss：
      {
  "parser": "scss"
}

5. Prettier 和 Sass 的自动格式化冲突

  • 问题描述：在保存文件时，Prettier 和 Sass 的自动格式化可能会互相覆盖。
  • 解决方法：
    1. 在编辑器中（如 VSCode）配置格式化工具的顺序：
      "editor.formatOnSave": true,
"[scss]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！