我們經(jīng)常因為某些變量不能全局引入而頭疼如麻，尤其是在做一些統(tǒng)一樣式的時候，簡直是噩夢，而且網(wǎng)上亂七八糟的文章很多很多，但是真正教你配置的沒幾個，因為很多都是復制過來的，有些人為了趕時間隨便復制一下，這里將為你提供史上最詳細的引入流程
第一步：創(chuàng)建項目
第二步：在src文件夾下面創(chuàng)建styles文件夾
第三步：創(chuàng)建variables.scss文件作為你使用的全局scss變量
$namespace: v;
$elNamespace: el;
第四步：如果需要跟js/ts交互的話創(chuàng)建global.module.scss，如無需要請忽略
注意：此時命名規(guī)則必須為xxx.module.scss，否則在js獲取時是一串字符文章來源：http://www.zghlxwxcb.cn/news/detail-598212.html
@import './variables.scss'
:export {
namespace: $namespace,
elNamespace: $elNamespace
}在js/ts中引入文章來源地址http://www.zghlxwxcb.cn/news/detail-598212.html
import variables from '@/styles/global.module.scss'
console.log(variables)
// 打印的結果
// {
// namespace: 'v',
// elNamespace: 'el'
// }第五步：在vite.config.ts/vite.config.js中引入
{
// code
css: {
preprocessorOptions: {
// 全局樣式引入
scss: {
additionalData: '@import "./src/styles/variables.scss";',
javascriptEnabled: true
}
}
}
// code
}到了這里，關于史上最詳細的vite引入scss全局變量詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
