Style Resources Module compatible with Nuxt 3

For vite, use this one.

https://vitejs.dev/config/shared-options.html#css-preprocessoroptions

Features

• 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
• Blazing fast:tm:

Warning

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!

Setup

• 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 @wattanx/style-resources dependency using yarn or npm to your project
• Add @wattanx/style-resources to modules section of nuxt.config.ts:

1export default defineNuxtConfig({
2  modules: ["@wattanx/style-resources"],
3
4  styleResources: {
5    // your settings here
6    sass: [],
7    scss: [],
8    less: [],
9    stylus: [],
10    hoistUseStatements: true, // Hoists the "@use" imports. Applies only to "sass", "scss" and "less". Default: false.
11  },
12});

Examples

LESS Example

nuxt.config.ts:

1export default defineNuxtConfig({
2  css: ["@/assets/global.less"],
3  modules: ["@wattanx/style-resources"],
4  styleResources: {
5    less: "@/assets/vars/*.less",
6  },
7});

assets/global.less

1h1 {
2  color: @green;
3}

assets/vars/variables.less

1@gray: #333;

assets/vars/more_variables.less

1@green: #00ff00;

pages/index.vue

1<template>
2  <div>
3    <!-- This h1 will be green -->
4    <h1>Test</h1>
5    <Test />
6  </div>
7</template>

components/Test.vue

1<template>
2  <div class="test">Test</div>
3</template>
4
5<style lang="less">
6.test {
7  color: @gray; // will be resolved to #333
8}
9</style>

---

SCSS Example

nuxt.config.ts:

1export default defineNuxtConfig({
2  modules: ["@wattanx/style-resources"],
3  styleResources: {
4    scss: [
5      "@/assets/vars/*.scss",
6      "@/assets/abstracts/_mixins.scss", // use underscore "_" & also file extension ".scss"
7    ],
8  },
9});

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

assets/vars/_colors.scss

1$gray: #333;

assets/abstracts/_mixins.scss

1@mixin center() {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate3d(-50%, -50%, 0);
6}

components/Test.vue

1<template>
2  <div class="test">Test</div>
3</template>
4
5<style lang="scss">
6.test {
7  @include center; // will be resolved as position:absolute....
8  color: $gray; // will be resolved to #333
9}
10</style>

Development

1# Install dependencies
2pnpm install
3
4# Generate type stubs
5pnpm dev:prepare
6
7# Develop with the playground
8pnpm dev
9
10# Build the playground
11pnpm dev:build
12
13# Run ESLint
14pnpm lint
15
16# Run Vitest
17pnpm test
18pnpm test:watch
19
20# Release new version
21pnpm run release