Overview

The article discusses the use of the @nuxtjs/style-resources module for Nuxt 3. It explains that this module eliminates the need for extra @import statements in CSS files and allows for sharing of variables, mixins, and functions across all style files. The module supports SASS, LESS, and Stylus and provides aliases and globbing as well. It is compatible with Nuxt’s build.styleResources and offers fast performance. However, it is important not to import actual styles with this module as it can slow down the build process. The installation process is also described in the article.

Features

• Share variables, mixins, and functions across all style files (no @import needed)
• Support for SASS, LESS, and Stylus
• Aliases (~/assets/variables.css) and globbing are supported
• Support for hoisting @use imports
• Compatible with Nuxt’s build.styleResources
• Fast performance

Installation

To use the @nuxtjs/style-resources module, first, ensure that you have the necessary dependencies for SASS/LESS/Stylus installed by running the following commands:

• SASS: yarn add sass-loader sass
• LESS: yarn add less-loader less
• Stylus: yarn add stylus-loader stylus

Next, add the @nuxtjs/style-resources dependency to your project using yarn or npm:

• Yarn: yarn add -D @nuxtjs/style-resources
• npm: npm install --save-dev @nuxtjs/style-resources

Finally, add @nuxtjs/style-resources to the modules section of your nuxt.config.ts file.

Examples of usage for LESS and SCSS are provided in the article.

Summary

The @nuxtjs/style-resources module is a useful tool for sharing variables, mixins, and functions across multiple style files in Nuxt 3. It eliminates the need for extra @import statements and supports SASS, LESS, and Stylus. It provides aliases and globbing and is compatible with Nuxt’s build.styleResources. However, it should not be used to import actual styles, as this can slow down the build process. The installation process involves adding the necessary dependencies and configuring the nuxt.config.ts file.