vue-cli创建的项目,如何引入scss文件

325 阅读1分钟

1、新建variables.scss

@mixin ellipse(){
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

2、单个vue文件引入

//Home.vue
<style lang="scss" scoped>
  @import '../../style/variables.scss';
  .home{
    &__address{
      span:nth-child(2){
        @include ellipse;
      }
    }
  }
</style>

3、全局引入

//vue.config.js
module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/style/variables.scss";`
      }
    }
  }
}

修改vue.config.js一定要重启项目才会生效哦