nuxt 项目 配置对 less、sass、stylus 预处理器的支持

nuxt 配置对less、sass、stylus的支持

---

导读

在项目开发的过程中呢，在编写项目样式的时候，很多童鞋喜欢使用css预处理器进行方便快捷的开发，
所以说，让我们的项目支持预处理器是非常有必要的；

这章节呢，我们项目新增对 stylus、less、sass 这三款比较常用的css预处理器工具的支持；

我们可以去到官网查看文档：https://zh.nuxtjs.org/api/configuration-build/#styleresources

• 首先我们需要安装 style-resources：

    cnpm install --save-dev @nuxtjs/style-resources

• 我们根据需要，会安装如下：

  • sass: cnpm install --save-dev sass-loader node-sass
  • less: cnpm install --save-dev less-loader less
  • stylus: cnpm install --save-dev stylus-loader stylus

• 接下来我们需要修改nuxt.config.js里面的配置，如下：

export default {
   
  modules: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
   
    scss: './assets/variables.scss',
    less: './assets/**/*.less',
    // sass: ... 需要什么配置什么，这里是全局的
  }
}

stylus

• 接下来，我们进入测试阶段，我们修改index.vue里面的样式如下：

<style scoped lang="stylus">
  wh($w = 100%, $h = 100%){
    
    width:$w; height:$h;background-color:red;
  }
  .content-page {