当我们需要在组件中使⽤ variable.scss 中定义的变量时，需要先引⼊⽂件，然后才能访问变量，如果每 个组件都要使⽤的话就可以通过共享访问。 例如，在 App.vue 中根据样式变量进⾏颜⾊设置，~@ 代表 src ⽬录。 由于 css 与 sass 的相对路径写法没有区别，如果要使⽤特殊写法，必须设置 ~。 @ 代表 /src ⽬录，为 webpack 别名，如果要在 sass 中使⽤，则需要书写为 ~@。 // App.vue 如果其他组件也需要操作，就可以配置 Vue CLI 向所有 Sass/Less 样式传⼊共享的全局变量(Vue CLI ⽂档)。 sass-loader ⽂档：addtionalData sass-loader v8 指的是 8.x 版本，从 9.x 更新为了 addtionalData，现⾏ 10.x。 具体版本应查看 package.json 中的版本信息再进⾏对应设置。 在 package.json 同级创建 vue.config.js ⽂件，并设置以下配置： // vue.config.js module.exports = { css: { loaderOptions: { // 给 sass-loader 传递选项 // 默认情况下 sass 选项会同时对 sass 和 scss 语法同时⽣效 // 因为 scss 语法在内部也是由 sass-loader 处理的 // 但是在配置 prependData 选项的时候 // scss 语法会要求语句结尾必须有分号，sass 则要求必须没有分号 // 在这种情况下，我们可以使⽤ scss 选项，对 scss 语法进⾏单独配置 scss: { // additionalData: @import "~@/variables.scss"; // 将路径修改为实际路径，添加 /styles 部分 prependData: @import "~@/styles/variables.scss"; } } } }; 完成啦~保存配置后，重新 npm run serve 。