vue3+vite安装和使用scss详细步骤:
1、安装依赖
1 | npm install sass -d |
2、配置vite.config.js
01 | export default defineConfig({ |
02 | plugins: [vue()], |
03 | css: { |
04 | preprocessorOptions: { |
05 | scss: { |
06 | // 全局引入 style.scss |
07 | additionalData: '@import "@/style.scss";' |
08 | } |
09 | } |
10 | }, |
11 | resolve: { |
12 | // 配置路径别名 |
13 | alias: { |
14 | '@' : path.resolve(__dirname, './src' ) |
15 | }, |
16 | } |
17 | }) |
3、在对应目录下创建main.scss
1 | $blue: #3385ff |
4、在对应文件引用变量:
1 | <style scoped> |
2 | div{ |
3 | color : $ blue ; |
4 | } |
5 | </style> |
搞定!