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

如果在每一个.vue文件都引入import scss文件，后期维护起来如果修改了scss文件位置，需要一个个修改会很麻烦，如果在main.js里直接import也是行不通的，因为main.js 只能import css文件 scss文件不能直接import，那么怎么才能全局引入呢？

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

npm i -D [email protected]

npm i [email protected]

版本号要注意 之前的文章里有写因为版本号的问题会出现报错的问题，就按照这个版本号写就完事了

步骤二：配置 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;
}