vue3 + vite引入scss全局变量
情境:使用了element-plus并按照官方加入了自定义主题的css.也有自己的全局变量globalstyle.scss文件。需求:想把globalstyle.scss文件中的代码可以每个vue文件中的<style>代码块访问到。解决过程:全局变量前:globalstyle.scss的引入方式(在index.html中引入)//index.html<!DOCTYPE html&
·
情境:
使用了element-plus并按照官方加入了自定义主题的css.也有自己的全局变量globalstyle.scss文件。
需求:
想把globalstyle.scss文件中的代码可以每个vue文件中的<style>代码块访问到。
解决过程:
全局变量前:
globalstyle.scss的引入方式(在index.html中引入)
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/src/assets/css/globalstyle.scss" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
改为全局变量后 :
step1:
👇为修改后的vite.config.js 。
import {
defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'~': path.resolve(__dirname, './'),
'@': path.resolve(__dirname, 'src')
}
},
css: {
preprocessorOptions: {
scss: {
//additionalData: '@import"@/assets/css/globalstyle.scss";'
//👆这样写是不行的。因为如果项目中其他的css文件有@forward关键字,就会提示错误
additionalData: '@use "@/assets/css/globalstyle.scss" as *;'
//👆这样写是可以的,但是要注意
//!!!!一定要将其他地方引入该css文件的地方删除,如index.html,否则会提示已经加载该module的错误!!!
}
}
}
})
step2:
千万记得将上图index.html中的
<link rel="stylesheet" href="/src/assets/css/globalstyle.scss" />
👆这句话千万记得注释掉!!!!!
-----end-----
更多推荐
已为社区贡献2条内容
所有评论(0)