持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情

前言

最近在做新的项目，然后在开发过程中遇到一些问题，通过这篇文章总结下，方便后面来查阅和学习。

问题总结

最近又使用vue来开发新的的项目，css预处理器用的是sass.

因为我想在组件里使用一些混入（mixin），比如居中，显示省略号，等等，因为我在main.js已经引入全局的index.scss,所以我就想在在index.scss定义了，这样全局组件都能使用。

index.scss定义的mixin

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
}

组件的使用

但是保存才发现，直接报错了。

index.scss不是已经在main.js全局引入了,为什么mixin用不了？

最后去查资料才发现，sass的变量声明，mixins等需要在vue.config.js下的css.loaderOptions.sass下配置，这样就能在组件里访问到对应的变量或者mixins。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~@/style/index.scss";'
      }
    }
  }
}

sass-loader 会把上面的这个scss文件内的变量和mixin等等在每个组件都声明，这样你就可以访问了。

要注意一下：上面的prependData是sass-loader 8版本及以上的使用，如果你是8版本以下的，你要使用additionalData

还要注意，如果还有报错的话，需要确认下句尾要有个逗号。

vue3新增了setup函数，我们可以在setup函数完成我们的逻辑。它是在vue的created函数之前执行的，所以它没有this的。

所有我们通过this去完成各个操作，而是要换种方式来做。

比如，路由跳转。之前是由this.$router.push(xxx)来实现的。

现在要改成

import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/about')

先把useRouter引入，在执行这个方法，返回一个router实例，这里的router相当于之前的this.$router。

其它比如store也是要这样引入后使用。

import { useStore } from 'vuex'
const store = useStore()

这里的store也是相当于之前的store实例了。