在vue3中配置scss

要在 Vue 3 中使用 SCSS(Sass 的一个子集),你需要安装相应的依赖,并对项目进行一些配置。下面是详细的步骤:

步骤 1: 安装依赖

首先,你需要安装 sassvue-loader(如果你使用的是 Vue CLI)以及 vite-plugin-vue2vite-plugin-vue3(如果你使用的是 Vite)。这里我们假设你使用的是 Vite 构建工具。

打开终端并运行以下命令以安装所需的依赖包:

npm install -D sass

步骤 2: 配置 Vite

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

在文件夹下创建三个文件
index.scss

主要用来引用其他文件


reset.scss

用来清除默认的样式,这里给出一个,模板如下:

*,
*:after,
*:before {
  box-sizing: border-box;

  outline: none;
}

html,
body,
div,
Vue3中使用SCSS可以通过以下步骤进行配置和使用: 1. 在项目的配置文件中,比如`vite.config.js`中,添加SCSS配置。可以使用`preprocessorOptions`来指定SCSS的预处理器选项,其中`additionalData`可以用来引入全局的SCSS文件。例如: ```javascript export default defineConfig({ // ... css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/global.scss";` } } } }) ``` 这样就可以在任何组件中使用全局的SCSS变量和样式了。 2. 在需要使用SCSS的组件中,可以直接在`<style>`标签中使用SCSS语法。例如: ```html <style lang="scss" scoped> .cmp-login { border: 1px solid $red; // 这里的$red是全局引入的SCSS中定义的变量 } </style> ``` 这样就可以在组件中使用定义好的SCSS样式了。 需要注意的是,为了使SCSS正常工作,需要确保项目中已经安装了相关的依赖,比如`sass`、`sass-loader`和`sass-resources-loader`。可以在项目的`package.json`文件中查看是否已经安装了这些依赖,并且版本号符合要求。 #### 引用[.reference_title] - *1* *3* [vue3.0 使用scss全局变量](https://blog.csdn.net/xiaobai_20190815/article/details/127449735)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue3中引入scss](https://blog.csdn.net/weixin_43799811/article/details/128257299)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值