Stylus Vue Vite: The Trio of Global Variables

Question

Stylus Vue Vite: The Trio of Global Variables

I'm trying to figure out how to globally import and use stylus variables in my Vue Vite project. How can I achieve this and access the variables within the script section of my Single File Component (SFC)?

Below is an excerpt from my Vite config:

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  css: {
    preprocessorOptions: {
      styl: {
        additionalData: `@import "@/styles/styles.styl"`
      }
    }
  }
})

Inside my styles.styl file, I define a variable like so:

contentSideMargin = 50px

When attempting to use the style from styles.styl in my SFC as shown below, it doesn't seem to work:

<style lang="stylus" scoped>
#main-container
  padding: $contentSideMargin  /* have also tried `contentSideMargin` */
</style>

Any insights or solutions would be greatly appreciated.

—

Update: Including my package.json for reference. There are no visible errors, but the variable seems to be passed directly into the CSS rather than its value being applied.

{
  "name": "project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "pinia": "^2.0.17",
    "pug": "^3.0.2",
    "vue": "^3.2.37",
    "vue-router": "^4.1.3"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0",
    "stylus": "^0.58.1",
    "stylus-loader": "^7.0.0",
    "vite": "^3.0.0"
  }
}

javascript vue.js vite stylus

Answer 1

Answer №1

THE BEST WAY TO SETUP VITE FOR STYLUS USING additionalData PROPERTY

Your search for the perfect solution ends here

vite.config.js:

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      stylus: {
        additionalData: `@import "${path.resolve(__dirname, 'src/assets/global_variables.styl')}"`
      }
    }
  },
})

A SIMPLER APPROACH - IMPORTING STYLUS VARIABLES IN CSS

If you prefer not to customize how Vite bundles your code, make sure all your

<style lang="stylus" scoped>

include definitions of stylus variables used in the component.

You can either define the variables explicitly at the start of

<style lang="stylus" scoped>

, or import them from a separate file:

App.vue:

<template>
  <div id="my-div">THIS IS MY DIV</div>
</template>
<style lang="stylus" scoped>
@import "./assets/global.styl";

#my-div {
  padding: 1rem;
  color: $c-text;
  background-color: $c-bg;
}
</style>

assets/global.styl:

$c-bg = red
$c-text = yellow

A CUSTOMIZED SETUP - USING A CUSTOM PLUGIN FOR STYLUS WITH VITE:

If you'd rather not use import within your components' <style> tags, set up Vite to automatically inject stylus files into your app's CSS with a custom plugin called vite-stylus-import-plugin.js. This method allows for greater customization of stylus file transformations compared to method A.

vite-stylus-import-plugin.js:

import path from 'path'

export function importStylus() {
    return {
        name: 'vite-stylus-import-plugin',
        async transform(code, id) {
        if (/.stylus$/g.test(id)) {
            return {
            code: `
                @import "${path.resolve(__dirname, 'src/assets/global_variables.styl')}"

                ${code}
            `,
            map: null,
            }
        }
        return null
        }
    }
}

Then use the plugin in your Vite config file:

vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { importStylus } from './vite-stylus-import-plugin.js'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), {
    ...importStylus(),
    enforce: 'pre',
  }]
})

SEE IT IN ACTION

I have demos showcasing the last two methods HERE - Check out the GitHub repo HERE. In the demo, the red <div> was styled using method B, while the blue <div> utilized method C. Although not featured, method A is also functional.

Answer 2

THE BEST WAY TO SETUP VITE FOR STYLUS USING additionalData PROPERTY

Your search for the perfect solution ends here

vite.config.js:

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      stylus: {
        additionalData: `@import "${path.resolve(__dirname, 'src/assets/global_variables.styl')}"`
      }
    }
  },
})

A SIMPLER APPROACH - IMPORTING STYLUS VARIABLES IN CSS

If you prefer not to customize how Vite bundles your code, make sure all your

<style lang="stylus" scoped>

include definitions of stylus variables used in the component.

You can either define the variables explicitly at the start of

<style lang="stylus" scoped>

, or import them from a separate file:

App.vue:

<template>
  <div id="my-div">THIS IS MY DIV</div>
</template>
<style lang="stylus" scoped>
@import "./assets/global.styl";

#my-div {
  padding: 1rem;
  color: $c-text;
  background-color: $c-bg;
}
</style>

assets/global.styl:

$c-bg = red
$c-text = yellow

A CUSTOMIZED SETUP - USING A CUSTOM PLUGIN FOR STYLUS WITH VITE:

If you'd rather not use import within your components' <style> tags, set up Vite to automatically inject stylus files into your app's CSS with a custom plugin called vite-stylus-import-plugin.js. This method allows for greater customization of stylus file transformations compared to method A.

vite-stylus-import-plugin.js:

import path from 'path'

export function importStylus() {
    return {
        name: 'vite-stylus-import-plugin',
        async transform(code, id) {
        if (/.stylus$/g.test(id)) {
            return {
            code: `
                @import "${path.resolve(__dirname, 'src/assets/global_variables.styl')}"

                ${code}
            `,
            map: null,
            }
        }
        return null
        }
    }
}

Then use the plugin in your Vite config file:

vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { importStylus } from './vite-stylus-import-plugin.js'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), {
    ...importStylus(),
    enforce: 'pre',
  }]
})

SEE IT IN ACTION

I have demos showcasing the last two methods HERE - Check out the GitHub repo HERE. In the demo, the red <div> was styled using method B, while the blue <div> utilized method C. Although not featured, method A is also functional.

Answer 3

Answer №2

I believe that a better approach would be

contentSideMargin = 50px

...


<style lang="stylus" scoped>
#main-container
  padding: $contentSideMargin  /* have also tried `contentSideMargin` */
</style>

The revised code should look like this

$contentSideMargin = 50px

...


<style lang="stylus" scoped>
#main-container {
  padding: $contentSideMargin;
}
</style>

Credits to @DVN-Anakin for the helpful comment and the provided link (github.com/TOA-Anakin/Vite-Vue3-TS-template) leading to a functional boilerplate - highlighting the noteworthy differences.

In summary: esteemed stackoverflow users - please take note of the comments! Fellow members here make sincere efforts to assist without unnecessary disruptions (hence the comments). Neglecting to acknowledge or thoroughly read them could result in missing crucial information essential for problem-solving (which is essentially our main goal here).

Answer 4

I believe that a better approach would be

contentSideMargin = 50px

...


<style lang="stylus" scoped>
#main-container
  padding: $contentSideMargin  /* have also tried `contentSideMargin` */
</style>

The revised code should look like this

$contentSideMargin = 50px

...


<style lang="stylus" scoped>
#main-container {
  padding: $contentSideMargin;
}
</style>

Credits to @DVN-Anakin for the helpful comment and the provided link (github.com/TOA-Anakin/Vite-Vue3-TS-template) leading to a functional boilerplate - highlighting the noteworthy differences.

In summary: esteemed stackoverflow users - please take note of the comments! Fellow members here make sincere efforts to assist without unnecessary disruptions (hence the comments). Neglecting to acknowledge or thoroughly read them could result in missing crucial information essential for problem-solving (which is essentially our main goal here).

Stylus Vue Vite: The Trio of Global Variables

Answer №1

Answer №2

Similar questions

Retrieve data from jQuery and send it to PHP multiple times

Pass along a parameter to Vue.js within Blade templates in Laravel

Access in-depth data by clicking on a map to get detailed information

Enhancing the Performance of jQuery Scripts

"I encountered an error while sorting lists in Vue 3 - the function this.lists.sort is not

Tips for updating the filename in a file input using AngularJS

The AJAX request was successful, however, the PHP script did not return any

Guide to building a customized route using Nuxt

Unusual occurrence while creating a unique identifier for a React component

Try employing an alternative angular controller when working with the bootstrap modal

Present Different Content for Visitors Using Ad-Blocking Software

Infinite loop readiness with JQuery

Error: Unable to locate specified column in Angular Material table

Enhance Your Website with Dynamic Autocomplete Feature Using jQuery and Multiple Input Search Functionality

Using Javascript, you can create a function that can disable or enable a text link based on

Link embedded in prism formatting, encased in code snippet

Experiencing difficulties with mocha and expect while using Node.js for error handling

The issue with Grid component in Nested Single file Component

Issue with Braintree drop-in form: Nonce string generation problem

Harnessing the power of lazysizes with WebP