vite scss :export 导出的变量

本文介绍如何使用SCSS的模块化特性定义并导出颜色变量,通过具体实例展示了如何在Vue项目中引入和使用这些变量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、创建一个命名*.module.scss; 案例:var.module.scss;

$base-type-color: #bfcbd9;

:export {

    baseTypeColor: $base-type-color;
}

2、在vue的文件引入,例 a.vue

<script setup lang="ts" name="App">
import varScc from './assets/scss/var.module.scss'
console.log(varScc)
</script>

3、结果

 

// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ compatibilityDate: '2024-11-01', target: 'static', ssr: false, modules: [ '@pinia/nuxt', '@nuxt/image', '@nuxtjs/i18n' ], i18n: { langDir: '~/locales/', locales: [ { code: 'en', iso: 'en-US', name: 'English', file: 'en-US.json' }, { code: 'zh', iso: 'zh-CN', name: '中文', file: 'zh-CN.json' }, ], defaultLocale: 'en', strategy: 'prefix', detectBrowserLanguage: { useCookie: true, cookieKey: 'i18n_redirected' }, vueI18n: './i18n.config.js' }, devtools: { enabled: true }, app: { baseURL: process.env.NODE_ENV === 'production' ? '/yun-health/' : '/', buildAssetsDir: '/_nuxt/' }, image: { provider: 'ipx', // 默认使用本地图片处理器 }, imports: { autoImport: true }, css: [ 'swiper/css/pagination', 'swiper/css', '@/assets/scss/_cards.scss' ], build: { // 开启 Tree Shaking transpile: ['swiper'], // 分析构建体积 analyze: { analyzerMode: 'static', open: true } }, dir: { public: 'public' }, vite: { css: { preprocessorOptions: { scss: { additionalData: `@use "@/assets/scss/main.scss" as *;` } } } }, postcss: { plugins: { 'postcss-clamp': {}, 'postcss-pxtorem': { rootValue: 16, propList: ['*'], selectorBlackList: [/^html$/] }, autoprefixer: {} } }, nitro: { prerender: { routes: ['/'] }, devProxy: { '/api': { target: 'https://test2.glkj.online/health-api', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }, runtimeConfig: { public: { apiBase: process.env.API_BASE || 'https://test2.glkj.online/health-api' } } }) nuxt.config.js updated. Restarting Nuxt... nuxi 20:08:53 [ nuxi 20:08:53] ERROR Cannot res
03-12
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值