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

Web Security Vulnerability: Cross Site Scripting Detected

Utilize JavaScript to seamlessly play a Spotify track within the Spotify client without disrupting your current

Is there a way to display an image in a React Native app using data from a JSON file?

How can I call the telerik radgrid.databind() function using a JavaScript function?

The step-by-step guide on passing arguments and fetching results from Angular UI Bootstrap Modal through Components

The live updates for user data in Firestore are not being reflected immediately when using valueChanges

Bootstrap datetimepicker is not showing the calendar for selecting a date, making it impossible to choose a specific date

Generating a file using buffer information in node.js

Exploring the power of ElasticSearch alongside Mysql

Customize material-ui themes using useStyles / jss

What is the best way to implement a recursive service call that is triggered automatically at regular intervals?

Switch up a font style using JavaScript to apply a Google font effect

What are some alternatives for integrating React production build files apart from utilizing Express?

Unable to retrieve AJAX response

What could be causing my browser to display twice the height value?

Issue with React and Mongoose: State Change Not Being Saved

Using Swig template to evaluate a condition

Implementing a feature that loads older posts on a webpage as users scroll down

Is there a way to dynamically insert the value of an input field into a text field in real time using Javascript or ajax?

What is the method for determining the height of a div element when it is set to 'height=auto'?