如何在vue3中使用scss

要使用scss首先需要下载相关的包

可以在终端使用下面的命令下载相关包

npm install -D sass

在src文件下新建一个文件夹叫做styles

在文件夹下创建三个文件

index.scss主要用来引用其他文件

reset.scss用来清除默认的样式

variable.scss用来配置全局属性

需要在vite.config.ts中配置一个全局配置

代码如下

css 复制代码
css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },
相关推荐
拉不动的猪9 分钟前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya11 分钟前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk816312 分钟前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef0613 分钟前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪16 分钟前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
z_mazin1 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan2 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君3 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
吃没吃3 小时前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam3 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript