Vite如何处理删除内置.css文件中的.css嵌套？

nr9pn0ug 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(131)

我一直在使用Vite，注意到由于删除了嵌套，构建的.css文件与原始源文件不同。具体来说，Vite似乎会扁平化或删除生成的.css文件中的嵌套选择器。
我很好奇Vite内部的机制或过程会导致这种行为。在构建过程中，Vite使用了哪些特定的步骤或插件来处理嵌套的CSS选择器的删除？
我没有使用任何postcss插件，比如postcss-nesting等等。
可以在这里看到：预构建：https://stackblitz.com/edit/vitejs-vite-f5jflt?file=src%2Findex.css后构建：https://stackblitz.com/edit/vitejs-vite-f5jflt?file=dist%2Fassets%2Findex-MKu-Fj7f.css
我已经查阅了Vite文档并搜索了相关信息，但我还没有找到关于这种转换是如何发生的明确解释。

css

来源：https://stackoverflow.com/questions/77778863/how-does-vite-handle-removal-of-css-nesting-in-built-css-files

1条答案

按热度按时间

e3bfsja21#

Vite在内部使用PostCSS，所以看起来它会自动转换为CSS：

"node_modules/@vue/compiler-sfc": {
      "version": "3.4.5",
      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.5.tgz",
      "integrity": "sha512-jauvkDuSSUbP0ebhfNqljhShA90YEfX/0wZ+w40oZF43IjGyWYjqYaJbvMJwGOd+9+vODW6eSvnk28f0SGV7OQ==",
      "dependencies": {
        "@babel/parser": "^7.23.6",
        "@vue/compiler-core": "3.4.5",
        "@vue/compiler-dom": "3.4.5",
        "@vue/compiler-ssr": "3.4.5",
        "@vue/shared": "3.4.5",
        "estree-walker": "^2.0.2",
        "magic-string": "^0.30.5",
        "postcss": "^8.4.32",
        "source-map-js": "^1.0.2"
      }
    },

字符串
但是为什么需要嵌套呢？它还没有得到很好的支持。

赞(0）回复(0）举报 2024-01-09

我来回答

Vite如何处理删除内置.css文件中的.css嵌套？

1条答案

相关问题

热门标签

最新问答