Nuxt Sass使用

1、安装

npm install --save-dev node-sass sass-loader@10 @nuxtjs/style-resources

// 注：sass尽量指定版本，最新版本不兼容易出错

2、配置

>>>nuxt.config.js

css: [
    '~assets/style/main.css'
  ],


buildModules: [
    '@nuxtjs/style-resources'
  ],


styleResources: {
    scss: [
      '~assets/style/mixins.scss',
      '~assets/style/variables.scss'
    ]
  },

3、使用

>>>mixins.scss

@mixin my-mixin-name {
  border: solid 2x black;
  border-radius: 10px;
}

>>>page

<style lang="scss">
  .my-class {
    margin: 2rem 5%;
    background: black;
    @include my-mixin-name
    padding: 1rem;
  }
</style>