vue 全局引入公共的scss 和 @mixin 与 @include的使用_vue @include

步骤一：下载node-sass sass-loader

npm i -D sass-loader@8.x
npm i node-sass@4.14.1
版本号要注意 之前的文章里有写因为版本号的问题会出现报错的问题，就按照这个版本号写就完事了 
步骤二：配置 vue.config.js 文件
 
module.exports = {
  configureWebpack: config => {
    config.externals = {
      AMap: "AMap"
      require('@vux/loader').merge(config, {
        plugins: ['vux-ui']
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v9 中，这个选项名是 "additionalData" v7中这个选项名是data
        prependData: `@import "@/global.scss"`
注意事项
 采用这种方法的时候要注意因为它会在所有 sass 文件里添加相同的代码。如果添加的不是变量, @mixin 之类的，而是类似下面的代码的话。假设你有20个scss文件的话，下面这段代码就会出现在你最终打包出来的文件20次。 
.box {
	color: green;
Sass @mixin 与 @include
 
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
 @include 指令可以将混入（mixin）引入到文档中。
 一般引入的scss文件如下 
@mixin center() {
	display: flex;
	justify-content: center;
	align-items: center;
在各文件中使用方式：此时是不需要在js 中import 可以直接使用 
div {
	width: 100px;
	height: 100px;
	@include center;
经过编译后则会被翻译成 
div {
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
                    如果在每一个.vue文件都引入import scss文件，后期维护起来如果修改了scss文件位置，需要一个个修改会很麻烦，如果在main.js里直接import也是行不通的，因为main.js 只能import css文件 scss文件不能直接import，那么怎么才能全局引入呢？步骤一：下载node-sass sass-loadernpm i -D sass-loader@8.xnpm i node-sass@4.14.1版本号要注意 之前的文章里有写因为版本号的问题会出现报错的问题，就按照这
@mixin border-radius($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
2.使用
<style lang='scss' scoped>
.cirle{
  @include border-radius(10rpx);.
全局混入：Vue.mixin(xxx)（在main.js中引入）
局部混入：mixins[‘xxx’]（在export default {}里面引入，和data同级）
mixins文件
export const show = {
				Jerry 之前的文章.scss 文件里的特殊符号 - % 百分号和 $美元符号，介绍了 scss 文件里两个特殊符号，百分号 % 和美元符号 $ 的用法。
本文介绍另一个特殊符号 @ 的用法。
使用预处理器的优点之一是它们能够处理复杂、冗长的代码并对其进行简化。 这就是 mixins 派上用场的地方！
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      <div class="userInfo">
        <div class="userAvatar">
          <img v-if="userInfo.headImgUrl" :src="userInfo.headImgUrl" alt="">
内联式Inline（行内样式）：<div style="这里写样式">我是一个块级的标签</div>
	嵌入式（内页样式）：将CSS样式表放到head中用<style>标签包裹起来
<styletype="text/css">...此...
				可以，你可以在多个Vue文件中使用同一个@mixin。使用方法是在Vue组件的style标签中通过 @include 指令引用该mixin。例如：
/* 定义mixin */
@mixin my-mixin {
  color: red;
/* 使用mixin */
<style lang="scss">
  .my-component {
    @include my-mixin;
</style>
这将在 `my-component` 组件中应用 `my-mixin` 的样式。