vue全局引入公共scss样式，子组件调用

前提

已引用并使用scss

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

配置

在vue.config.js中

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/index.scss";`
      }
    }
  }
};

子组件调用

<style scoped lang="scss">
  .page-container {
    display: flex;
    flex-direction: row;
    padding: 16px;
    background: $background;
  }
</style>

不生效或报错原因的解决

1、重启项目