Repository files navigation

Nuxt 2 is supported with@nuxtjs/style-resources@^1, documentation is onv1 branch.

If you are using Vite, this module is not needed.

You can use thecss.preprocessorOptions instead.

📖Release Notes

• Share variables, mixins, functions across all style files (no@import needed)
• Support for SASS, LESS and Stylus
• Aliases (~/assets/variables.css) and globbing as supported
• Support for hoisting@use imports
• Compatible with Nuxt'sbuild.styleResources (and will take them over directly if included!)
• Blazing fast:tm:

Do not import actual styles.Use this module only to import variables, mixins, functions (et cetera) as they won't exist in the actual build. Importing actual styles will include them in every component and will also make your build/HMR magnitudes slower.Do not do this!

• If not already present, add the dependencies you need for SASS/LESS/Stylus (depending on your needs)
  • SASS:yarn add sass-loader sass
  • LESS:yarn add less-loader less
  • Stylus:yarn add stylus-loader stylus
• Add@nuxtjs/style-resources dependency using yarn or npm to your project (yarn add -D @nuxtjs/style-resources)
• Add@nuxtjs/style-resources tomodules section ofnuxt.config.ts:

exportdefaultdefineNuxtConfig({modules:['@nuxtjs/style-resources',],styleResources:{// your settings heresass:[],scss:[],less:[],stylus:[],hoistUseStatements:true// Hoists the "@use" imports. Applies only to "sass", "scss" and "less". Default: false.}})

nuxt.config.ts:

exportdefaultdefineNuxtConfig({css:['~assets/global.less'],modules:['@nuxtjs/style-resources'],styleResources:{less:'./assets/vars/*.less'}})

assets/global.less

h1 {color:@green;}

assets/vars/variables.less

@gray:#333;

assets/vars/more_variables.less

@green:#00ff00;

pages/index.vue

<template>  <div><!-- This h1 will be green-->    <h1>Test</h1>    <test/>  </div></template><script>importTestfrom'~/components/Test'exportdefault {  components: { Test }}</script>

components/Test.vue

<template>  <divclass="ymca">    Test  </div></template><style lang="less">.ymca {color:@gray;// will be resolved to #333  }</style>

nuxt.config.ts:

exportdefaultdefineNuxtConfig({modules:['@nuxtjs/style-resources'],styleResources:{scss:['./assets/vars/*.scss','./assets/abstracts/_mixins.scss'// use underscore "_" & also file extension ".scss"]}})

Instead of'./assets/abstracts/_mixins.scss' you can use also'~assets/abstracts/_mixins.scss'

assets/vars/_colors.scss

$gray:#333;

assets/abstracts/_mixins.scss

@mixincenter() {position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0);}

components/Test.vue

<template>  <divclass="ymca">    Test  </div></template><style lang="scss">.ymca {@includecenter;// will be resolved as position:absolute....color:$gray;// will be resolved to #333  }</style>

Inspired bynuxt-sass-resources-loader.

MIT License

Copyright (c) Alexander Lichter