全局变量:手写笔Vue Vite

Question

我想在我的Vue Vite项目中全局创建和使用手写笔变量。如何从全局导入手写笔变量，以便在我的证监会的脚本部分中使用？

下面是我的Vite配置：

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

在我的styles.styl文件中，我定义了一个变量，如：

contentSideMargin = 50px

在我的证监会中，我尝试使用来自styles.styl的样式，如

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

但不起作用。

-

编辑:添加package.json。没有可见的错误，变量直接传递到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"
  }
}

Answer 1

方法A) -使用属性为手写笔配置VITE

这就是你一直在寻找的解决方案。

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')}"`
      }
    }
  },
})

方法B) -在CSS中导入手写笔变量

如果您不想自定义配置Vite应该如何捆绑代码，那么所有<style lang="stylus" scoped>都必须包含要在组件中使用的stylus变量的定义。

您可以在<style lang="stylus" scoped>开头显式地定义变量，或者如果在单独的文件中有变量定义，则可以导入该文件：

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>

资产/全球.样式：

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

方法C) -为手写笔配置带有自定义插件的VITE：

如果您不喜欢在组件的import标记中使用<style>，则可以配置Vite，通过包含自定义Vite插件vite-stylus-import-plugin.js，将手写笔文件自动注入应用程序的CSS中。与方法相比，方法的一个优点是您可以对手写笔文件的转换进行额外的自定义。

vite-触控笔-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
        }
    }
}

之后，您可以在Vite配置文件中使用该插件：

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',
  }]
})

工作演示

我有最后两种方法这里 - GitHub repo 这里的工作演示。在演示中，大的红色<div>元素使用方法B样式，蓝色<div>使用方法C样式。方法A不在我的演示中，但它也能工作

Answer 2

我认为相反

contentSideMargin = 50px

...


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

代码应该是

$contentSideMargin = 50px

...


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

感谢@DVN-阿纳金评论和评论中提供的链接(github.com/ Thanks /Vite-vue3-TS-模板)到一个工作样板-很容易发现差异

简单地说：：亲爱的堆栈溢出用户-请阅读评论！在座的各位议员尽了最大的努力，尽量在不引起太大噪音的情况下提供协助(因此作出评论)。如果你跳过或不正确地阅读它们--你可能会丢失一些重要的信息来帮助你解决你的问题(这是我们首先要做的)。