From d1a42488b36d662b133e5941555109a4b3ee89ec Mon Sep 17 00:00:00 2001
From: good luck <1204505056@qq.com>
Date: Fri, 10 Jul 2020 10:06:35 +0800
Subject: [PATCH] docs(zh): `additionalData` example for sass-loader 9.0
 (#5668)

---
 docs/zh/guide/css.md | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/docs/zh/guide/css.md b/docs/zh/guide/css.md
index 7c5f286bba..687f5100f4 100644
--- a/docs/zh/guide/css.md
+++ b/docs/zh/guide/css.md
@@ -135,7 +135,20 @@ module.exports = {
       // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
       // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
       scss: {
-        prependData: `@import "~@/variables.scss";`
+        // sass-loader v8语法
+        // prependData: `@import "~@/variables.scss";`
+        // sass-loader v9语法
+        additionalData(content, loaderContext) {
+          const { resourcePath, rootContext } = loaderContext;
+          const relativePath = path.relative(rootContext, resourcePath);
+          if (
+            relativePath.replace(/\\/g, "/") !== "src/styles/variables.scss"
+          ) {
+            return '@import "~@/styles/variables.scss";' + content;
+          }
+          return content;
+        },
+
       },
       // 给 less-loader 传递 Less.js 相关选项
       less:{