揭开 sass-loader 抛弃 /deep/ 语法的幕后真相

2024-02-20 04:33:18

前言

作为一名久经沙场的 Sass 高手，笔者在最近的项目中遇到了一件令人头疼的事情——sass-loader 突然不认 /deep/ 语法了！这让我不禁百思不得其解，明明之前一直相安无事，为何突然翻脸不认人了？带着这个疑问，我开启了探索之旅，最终揭开了事情的真相。在此，我将与大家分享这一段经历，希望对同样遇到此问题的小伙伴有所帮助。

为何 /deep/ 语法被抛弃

首先，我们需要了解 /deep/ 语法的由来。/deep/ 语法是 Sass 中的一种穿透性选择器，可以用来匹配组件内部的元素，这在构建复杂组件时非常有用。然而，由于 /deep/ 语法并不属于 CSS 标准，因此存在兼容性问题。在 Web 标准不断演进的今天，/deep/ 语法的使用越来越受到限制。

另一方面，sass-loader 作为 Sass 的 JavaScript 实现，需要遵循 Web 标准。因此，为了确保与最新标准的兼容性，sass-loader 官方团队决定弃用 /deep/ 语法，转而使用更加标准的 ::v-deep 选择器。

新旧项目迁移指南

对于新项目而言，强烈建议使用 ::v-deep 选择器，以确保项目的兼容性和稳定性。而对于旧项目，如果需要继续使用 /deep/ 语法，则需要进行一些代码迁移。具体步骤如下：

首先，需要将项目中的 /deep/ 语法全部替换为 ::v-deep。
然后，在项目的根目录下创建一个名为 .browserslistrc 的文件，并添加以下内容：

> {
>   "browsers": [
>     "> 1%",
>     "last 2 versions",
>     "not dead"
>   ]
> }

最后，重新安装 sass-loader 和 postcss-loader，并确保项目中的 postcss.config.js 文件中包含以下内容：

> module.exports = {
>   plugins: {
>     "postcss-import": {},
>     "postcss-url": {},
>     "postcss-aspect-ratio-mini": {},
>     "postcss-write-svg": {
>       utf8: false
>     },
>     "postcss-cssnext": {
>       browsers: [
>         "> 1%",
>         "last 2 versions",
>         "not dead"
>       ]
>     },
>     "postcss-reporter": {}
>   }
> };