nuxt使用scss变量配置

1、配置nuxt.config.js文件

const webpack = require('webpack');

  

module.exports = {

 head: {

  title: 'project',

  meta: [

   { charset: 'utf-8' },

   { name: 'viewport', content: 'width=device-width, initial-scale=1' },

   { hid: 'description', name: 'description', content: 'Nuxt.js project' }

  ]

 },

 build: {

  extend(config,ctx){

    const sassResourcesLoader = {

    loader: 'sass-resources-loader',

    options: {

     resources: [

     'assets/cyc.scss'

     ]

    }

    }

    // 遍历nuxt定义的loader配置，向里面添加新的配置。

    config.module.rules.forEach((rule) => {

    if (rule.test.toString() === '/\.vue$/') {

     rule.options.loaders.sass.push(sassResourcesLoader)

     rule.options.loaders.scss.push(sassResourcesLoader)

    }

    if (['/\.sass$/', '/\.scss$/'].indexOf(rule.test.toString()) !== -1) {

     rule.use.push(sassResourcesLoader)

    }

    })

  

  },

 }

}