场景说明// 这是一个存放变量的scss文件 “@/styles/_variables.scss”// color font …$cf-light: #B6B6B6;$cf-gray: #8C8C8C;$cf-med: #505050;$cf-dark: #333333;$cf-highlight: #1775F0;我要在其他文件内都用这个来保证样式统一。比如某个组件<template> <div class=“notice”>注意！</div></template><style lang=“scss” scoped>.notice { color: $cf-highlight;}</style>这样就报错了。要改成下面这样<template> <div class=“notice”>注意！</div></template><style lang=“scss” scoped>@import “@/styles/_variables.scss”;.notice { color: $cf-highlight;}</style>简单描述一下：做Vue项目的时候，有时候我们预先设置了一个主题样式文件（_variables.scss），存放大量的定义的SASS变量，需要在不同的组件中使用，默认是无法使用的，除非每个组件内都引入这个_variables.scss文件，十分麻烦，这里提供几种方案。解决办法我有几个解决方案，理论上都可行，大家不妨根据实际应用场景来实践一下。使用sass-resources-loader如果项目使用Vue-cli 2/3，或者Vue项目用的Webpack，用这个loader都是可以的。官方对于各种场景已经写的很清楚了，请看sass-resources-loader。具体不说明了。Vue-cli 3.x 下的最方便的方案这个我还没实践，不过应该是可行的。。。给小白们自己去试，好用的话记得留言回复下哦打开vue.config.js文件，进行如下配置：module.exports = { css: { loaderOptions: { sass: { data: 结语现在不用每个组件都写导入变量文件了，是不是轻松多了，也不会因为文件名，路径调整，而胆战心惊的文件批量替换。我为什么写这个文章，因为虽然以前研究过，但是时代变化很快，一些更好的方案出现了，但是很多人依旧采用旧的，可能在新的项目上带来一些问题，所以就更新了。（小字，看不见）：其次，我其实在使用easywebpack的egg+vue脚手架遇到了这个问题，搞了半天没搞好。。。去官方群里问没人鸟我，于是凄惨退群（底层技术渣的待遇）。参考：Load a global settings.scss file in every vue component?@import "@/styles/_variables.scss"; } } }};具体细节，请阅读：Globally Load SASS into your Vue.js ApplicationsHow to Import a Sass File into Every Vue Component in an App这两篇原理相同，就是细节上有点不同，怕有的打不开就放两个给大家研究下。Nuxt这里还是接住一个插件style-resources-module，这个最近才出的，高级很多，在他之前，都是用nuxt-sass-resources-loader，如果你的项目还在用旧的，可以换成新的。nuxt-sass-resources-loader官方也说了不在更新维护，建议使用style-resources-module。怎么用呢？这里有Example，我也复制一份，醒目。打开nuxt.config.jsexport default { modules: [’@nuxtjs/style-resources’], styleResources: { scss: [ ‘./assets/styles/_variables.scss’, ‘./assets/styles/mixins.scss’ // use underscore “” & also file extension “.scss” ] }}自己注意文件路径