preparation

src/assets/scss/public.scss

@@ -0,0 +1 @@
+$default-color: green;

src/views/About.vue

@@ -3,3 +3,9 @@
     <h1>This is an about page</h1>
   </div>
 </template>
+
+<style lang="scss" scoped>
+h1 {
+  color: $default-color;
+}
+</style>

src/views/Home.vue

@@ -1,18 +1,21 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+    <h1>This is a home page</h1>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
+// import HelloWorld from "@/components/HelloWorld.vue";
 
 export default {
   name: "Home",
-  components: {
-    HelloWorld
-  }
+  components: {},
 };
 </script>
+
+<style lang="scss" scoped>
+h1 {
+  color: $default-color;
+}
+</style>

vue.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  css: {
+    loaderOptions: {
+      // 给 sass-loader 传递选项
+      sass: {
+        // @/ 是 src/ 的别名
+        // 所以这里假设你有 `src/variables.sass` 这个文件
+        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
+        // additionalData: `@import "~@/variables.sass"`,
+      },
+      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
+      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
+      // 但是在配置 `prependData` 选项的时候
+      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
+      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
+      scss: {
+        prependData: `@import "~@/assets/scss/public.scss";`,
+      },
+    },
+  },
+};