Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

请问这种如何解决呢？在vite.config里面配置了scss的全局导入，在一个模板或者页面的style里面使用@use导入这个模板或者页面的样式，其中样式使用了全局变量#535

Unanswered
zc-tired asked this question inQ&A
Discussion options

如题，跑起来之后会报错，如果该页面不使用@use而是直接把样式写到style里面就没有这个问题。使用@import会在控制台打印一大堆的警告信息，没有办法解决了，求助啊！！！
这是附件vite-demo.zip

vite.configpreprocessorOptions:{// 全局样式引入scss:{additionalData:'@use "@/styles/var.scss" as *;',javascriptEnabled:true}}
详细请查看附件里面的例子<style lang="scss" scoped>@use'./page.scss'</style>
You must be logged in to vote

Replies: 1 comment

Comment options

根据问题描述，问题出在Vite配置的SCSS全局变量未正确注入到通过@use引入的文件中。以下是逐步解决方案：

  1. 确保路径别名正确配置

在vite.config.js中，确认@别名指向src目录：

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path'export default defineConfig({  plugins: [vue()],  resolve: {    alias: {      '@': path.resolve(__dirname, 'src'), // 确保路径正确    },  },  css: {    preprocessorOptions: {      scss: {        additionalData: '@use "@/styles/var.scss" as *;', // 使用别名      },    },  },})
  1. 使用@import替代@use进行全局注入（临时方案）
    虽然会触发警告，但能验证变量是否有效：
// vite.config.jsadditionalData: '@import "@/styles/var.scss";'

然后在组件中直接使用变量，无需@use引入。

  1. 更新依赖版本
    确保使用最新的Sass和Vite版本，避免兼容性问题：
npm install sass@latest vite@latest
  1. 显式导入变量到局部文件
    在page.scss顶部再次导入变量（冗余但确保作用域）：
// page.scss@use '@/styles/var.scss' as *;.text {  color: $primary-color;}
  1. 检查变量定义
    确认var.scss正确定义变量并导出：
// src/styles/var.scss$primary-color: #535; // 无需导出，因使用as *
  1. 避免在组件中使用@use引入SCSS文件
    直接在组件样式中编写或改用@import（尽管有警告）：
<style lang="scss" scoped>.text {  color: $primary-color;}</style>

最终配置推荐
vite.config.js:

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path'export default defineConfig({  plugins: [vue()],  resolve: {    alias: {      '@': path.resolve(__dirname, 'src'),    },  },  css: {    preprocessorOptions: {      scss: {        additionalData: '@use "@/styles/var.scss" as *;',      },    },  },})

组件使用示例：

<style lang="scss" scoped>/* 直接使用变量，无需@use */.text {  color: $primary-color;}</style>
You must be logged in to vote
0 replies
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Q&A
Labels
None yet
2 participants
@zc-tired@akiverin
[8]ページ先頭
©2009-2025 Movatter.jp