在vue-cli3使用sass(scss)定义的全局样式及变量 为统一风格及便于后续维护，在项目中常用的主色调、圆角、阴影相关的样式定义到一个全局变量文件中，常规的使用需要每个Vue组件中进行import,该操作会比较繁琐，经过了解后发现可以基于webpack的loader参数引入全局变量的方式来实现，相关实现过程如下所示：vue.config.jsmodule.exports = { // ... css: { // 为便于在Vue组件中使用，全局引入variables.scss中定义的变量 loaderOptions: { sass: { prependData: `@import "@/styles/variables.scss";` } } } variables.css// base color $blue:#324157; $light-blue:#3A71A8; $red:#C03639; $pink: #E65D6E; $green: #30B08F; $tiffany: #4AB7BD; $yellow:#FEC171; $panGreen: #30B08F; $theme: #004ca1; // ...vue 组件<style lang="scss" scoped> .btn-cursor { cursor:pointer; color: $theme } </style>