Vue-Cli 3 引入 SCSS 全局变量

以你之姓@ 2022-01-19 00:21 950阅读 0赞

首先创建一个全局变量文件 global.scss

  1. $theme-color: #efefef;
  2. 复制代码

编辑vue.config.js

  1. module.exports = {
  2.   // ...
  3.   css: {
  4.     loaderOptions: {
  5.       sass: {
  6.         // 根据自己样式文件的位置调整
  7.         data: `@import "@/styles/global.scss";`
  8.       }
  9.     }
  10.   }
  11. };
  12. 复制代码

现在就可以在任意地方使用global.scss中定义的变量了

  1. <template>
  2.   <div class="box"></div>
  3. </template>
  4. <script>
  5. export default {
  6.   data() {
  7.     return {};
  8.   }
  9. };
  10. </script>
  11. <style lang="scss">
  12. .box {
  13.   background-color: $theme-color;
  14. }
  15. </style>
  16. 复制代码

阅读原文

转载于:https://juejin.im/post/5ce5ff37518825333d1b93df

发表评论

表情：
评论列表 （有 0 条评论，950人围观）

还没有评论，来说两句吧...

相关阅读