nuxt筆記（一）nuxt中scss使用並可全局使用變量

1.插件安裝：

npm install css-loader node-sass postcss-loader sass-loader style-loader --save -dev

2.在項目的assets目錄下新建一個css目錄，然後在該目錄下新建一個index.scss文件，用這個文件作爲scss的入口文件，在這個文件裏引入其他的scss即可，例如：

3.nuxt.config.js中配置：

module.exports {
	css: [
	    {src: '~assets/css/index.scss', lang: 'scss'} // 指定
	  ],
}

經過以上配置發現，index.scss中的樣式可以在項目中使用了，但遇到了一個問題：
index.scss中的變量不能再頁面中直接使用，需要在頁面中單獨引入才能使用，很麻煩。

4.scss變量全局使用：
參考文檔：官網

npm install @nuxtjs/style-resources

nuxt.config.js

module.exports {
	css: [
	    {src: '~assets/css/index.scss', lang: 'scss'} // 指定
	  ],
	modules: [
	    // Doc: https://axios.nuxtjs.org/usage
	    '@nuxtjs/axios',
	    '@nuxtjs/style-resources'
	  ],
	  styleResources: {
	    scss: './assets/css/index.scss'
	  },
}

然後頁面中就可以直接使用啦：

<template>
  <div class="login">
    <div class="login-top">
      
    </div>
  </div>
</template>
<script>
  
</script>
<style lang="scss" scoped>
.login-top {
  height: 3.2rem;
  background: $tmColor;
}
</style>