[英]Global Variables : Stylus Vue Vite
I would like to create and use stylus variables globally in my Vue Vite project.我想在我的 Vue Vite 项目中全局创建和使用手写笔变量。 How can I import stylus variables globally to use within the script section of my SFC?
如何全局导入手写笔变量以在 SFC 的脚本部分中使用?
Here's my Vite config:这是我的 Vite 配置:
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
css: {
preprocessorOptions: {
styl: {
additionalData: `@import "@/styles/styles.styl"`
}
}
}
})
In my styles.styl
file I define a variable like:在我的
styles.styl
文件中,我定义了一个变量,例如:
contentSideMargin = 50px
In my SFC I try to use a style from styles.styl
such as在我的 SFC 中,我尝试使用
styles.styl
中的样式,例如
<style lang="stylus" scoped>
#main-container
padding: $contentSideMargin /* have also tried `contentSideMargin` */
</style>
but it does not work.但它不起作用。
— —
EDIT: adding package.json.编辑:添加 package.json。 There are no visible errors, the variable is passed directly into the css rather than its value.
没有可见的错误,变量直接传递到 css 而不是它的值。
{
"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"
}
}
METHOD A) - CONFIGURING VITE FOR STYLUS USING additionalData
PROPERTY方法 A) - 使用
additionalData
数据属性为 STYLUS 配置 VITE
This is the solution You have been searching for这是您一直在寻找的解决方案
vite.config.js: 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')}"`
}
}
},
})
METHOD B) - IMPORTING STYLUS VARIABLES IN CSS方法 B) - 在 CSS 中导入手写笔变量
If you don't want to custom-configure how Vite should bundle your code, all your <style lang="stylus" scoped>
must contain definitions of stylus
variables that you are going to use in the component.如果你不想自定义配置 Vite 应该如何捆绑你的代码,你所有的
<style lang="stylus" scoped>
必须包含你将在组件中使用的stylus
变量的定义。
Either u can define the variables explicitly at the beginning of <style lang="stylus" scoped>
or if you have variables definitions in a separate file, you can import that file:您可以在
<style lang="stylus" scoped>
的开头显式定义变量,或者如果您在单独的文件中有变量定义,则可以导入该文件:
App.vue:应用程序.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:资产/global.styl:
$c-bg = red
$c-text = yellow
METHOD C) - CONFIGURING VITE WITH CUSTOM PLUGIN FOR STYLUS:方法 C) - 使用自定义插件为手写笔配置 VITE:
If you prefer not to use import
within your components' <style>
tags, you can configure Vite to automatically inject stylus files into the CSS of your app by including a custom Vite plugin vite-stylus-import-plugin.js
.如果您不想在组件的
<style>
标签中使用import
,您可以配置 Vite 通过包含自定义 Vite 插件vite-stylus-import-plugin.js
将手写笔文件自动注入应用程序的 CSS 。 An advantage of this method over method A is that you can extra-customize the transformation of your stylus files.此方法优于方法 A的一个优点是您可以额外自定义手写笔文件的转换。
vite-stylus-import-plugin.js: 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
}
}
}
After that you can use that plugin in your Vite config file:之后,您可以在您的 Vite 配置文件中使用该插件:
vite.config.js: 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',
}]
})
WORKING DEMOS工作演示
I have a working demo for the last two methods HERE - GitHub repo HERE .我在这里有最后两种方法的工作演示 - GitHub repo HERE 。 In the demo, the big red
<div>
element was styled using the method B , the blue <div>
was styled using the method C .在演示中,大红色
<div>
元素使用方法 B设置样式,蓝色<div>
使用方法 C 设置样式。 The method A is not in my demo, but it works too方法 A不在我的演示中,但它也有效
I think that instead我认为相反
contentSideMargin = 50px
...
<style lang="stylus" scoped>
#main-container
padding: $contentSideMargin /* have also tried `contentSideMargin` */
</style>
The code should be代码应该是
$contentSideMargin = 50px
...
<style lang="stylus" scoped>
#main-container {
padding: $contentSideMargin;
}
</style>
Thanks to @DVN-Anakin comment and the link provided in the comment ( github.com/TOA-Anakin/Vite-Vue3-TS-template) to a working boilerplate - it's easy to spot the differences感谢@DVN-Anakin 评论和评论中提供的链接 (github.com/TOA-Anakin/Vite-Vue3-TS-template) 到一个工作样板 - 很容易发现差异
In short: dear stackoverflow users - please read the comments.简而言之:亲爱的 stackoverflow 用户 - 请阅读评论。 Members here put their best effort to try to assist without making to much noise (hence comments).
这里的成员尽最大努力尝试在不引起太大噪音的情况下提供帮助(因此发表评论)。 If you skip them or not reading them properly - you may loose some vital information that will help you to solve your problem (which is kinda of what we are doing here in the first place)
如果您跳过它们或没有正确阅读它们 - 您可能会丢失一些有助于您解决问题的重要信息(这有点像我们首先在这里所做的)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.