记一次VueCLi生成项目中引入全局Scss文件的踩坑记录

在前端开发项目中，sass是一个很好的编写样式的预处理工具，但是集成到VueCli中以后坑还是很多的。如果想要在项目入口文件main.js中引入，然后可以全局使用，会报各种各样的错。下面就记录一下自己的踩坑经历吧。

• VueCli生成项目集成插件版本

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }

• 我们期待的使用方式：

// index.scss  定义全局变量和混入
@import './variable.scss';
@import './mixin.scss';
@import './element-variables.scss'
// main.js - 全局引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
// 全局引入
import '@/assets/styles/index.scss'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// App.vue 使用 全局变量