vue3—SCSS的安装、配置与使用

许豪平安

已于 2023-08-03 16:03:10 修改

阅读量1k

点赞数

分类专栏：类似vue中引入echarts等等内容文章标签： vue.js scss 前端

于 2023-08-03 15:18:25 首次发布

本文链接：https://blog.youkuaiyun.com/qq_55682738/article/details/132084054

版权

类似vue中引入echarts等等内容专栏收录该内容

2 篇文章

订阅专栏

SCSS

安装

使用npm安装scss：

 npm install sass sass-loader --save-dev

配置

配置到全局

🌟附赠代码🌟

css: {
    preprocessorOptions: {
      scss: {
        additionalData:
          '@import "./src/Function/Easy_I_Function/Echarts/ToSeeEcharts/utill.scss";', // 添加公共样式
      },
    },
  },

单组件快速使用

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

许豪平安

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

在vue3中配置scss

iku_n的博客

08-12

4007

要在 Vue 3 中使用 SCSS（Sass 的一个子集），你需要安装相应的依赖，并对项目进行一些配置。

Vue3 Scss的使用(二)

秋秋小事

04-18

519

使用混合器，scss中的条件语句，通过v-for实现一组button的不同背景色的配置，在scss中混合器与if-else条件语句一起使用，可以实现一些更复杂的页面样式。在日常的开发中，我们可能有些一能够复用的style，我们不希望重复写这些样式，此时我们可以使用Scss的混合器。，使用scss的混合器配置button样式。

参与评论您还未登录，请先登录后发表或查看评论

Vue3+Vite中使用SCSS

qq_54140719的博客

03-05

8252

Vue3引入SCSS的执行命令 npm i sass sass-loader --save-dev 配置全局变量，

vue3里面scss怎么使用js的变量值

热门推荐

海风依旧

12-24

1万+

在开发新项目的时候打算使用scss，新项目使用的是vue3框架，所以发一下scss安装的教程

在vue3项目上安装SCSS

weixin_40758662的博客

06-28

2159

1.安装sass依赖包。

如何在vue3中使用scss

qq_74351687的博客

07-08

1581

需要在vite.config.ts中配置一个全局配置。在src文件下新建一个文件夹叫做styles。variable.scss用来配置全局属性。index.scss主要用来引用其他文件。reset.scss用来清除默认的样式。要使用scss首先需要下载相关的包。可以在终端使用下面的命令下载相关包。在文件夹下创建三个文件。

vue3 安装使用scss

qq_34907249的博客

12-15

4858

版本太低，这个先不用管（本人也没测试高版本），查看下node版本，其和node-sass是有对应关系的本人是 node16 对应的 node-sass 是6+，此时 npm install node-sass@6 安装重启应该可以了。备注：如果还有问题，就装下node-gyp,升级下python版本。3.2 如果还报 gyp相关错误，看下报错信息此时python应该是有了。如果没有安装python,就去下个安装包装一下记得配置环境变量。3.1、安装node-sass 报错。

Vue + Scss 动态切换主题颜色实现换肤的示例代码

10-15

Vue + Scss 动态切换主题颜色实现...要实现上述功能，需要理解Vue和Scss的相关概念，并掌握如何在Vue项目中配置和使用Scss。文中提供的示例代码和步骤，为开发者提供了一个很好的实践参考，可以帮助快速实现换肤功能。

vue安装和使用scss及sass与scss的区别详解

10-17

首先，让我们了解如何在 Vue 项目中安装和配置 SCSS。在 Vue 项目中使用 SCSS 需要两个关键的依赖：`node-sass` 和 `sass-loader`。你可以通过 npm 包管理器来安装它们： ```bash npm install node-sass sass-...

vue2配置scss的方法步骤

10-16

主要介绍了vue2配置scss的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Vue3 安装scss/sass

hx_1551的博客

05-05

6690

第一步：安装依赖 npm install node-sass -d npm install sass-loader -d npm install sass -d 注:node-sass sass-loader sass 属于重要依赖，所以安装时需用-d而不用-s 第二步：在vue.config.js中配置scss/sass module.exports ={ pluginOptions:{ 'style-resources-lo...

Vue3 Scss的使用(一)

秋秋小事

04-12

648

最近因为工作原因阅读了ElementPlus和Vexip UI开源框架的源代码，发现这两个框架的style样式都是用的scss，今天进行了scss系统性的研究学习。

VUE3中使用scss

qq_34458968的博客

02-25

1万+

1.安装scss所需要的安装包 cnpm install node-sass sass-loader style-loader -S 2.在vue.config.js中配置 pluginOptions: { 'style-resources-loader': { preProcessor: 'scss', patterns: [] } } const { defineConfig } = require('@vue/cli-s

vue3-scss使用

码农的专栏

06-25

7783

一、安装环境python 3.9下载地址：https://www.python.org/downloads/release/python-3913/ 二、npm安装三、新建scss文件scss/product.scss 四、使用/products/index.vue 效果：

Vue3项目中使用scss

weixin_45732235的博客

11-19

2657

Vue3项目中使用scss

vue3项目使用scss

Qing_X_C的博客

05-25

378

【代码】vue3项目使用scss。

vue 3.x - 安装scss/sass

weixin_40721081的博客

07-20

826

vue 3.x - 安装scss/sass 1.首先执行以下命令安装 style-resources-loader; vue add style-resources-loader 2.然后安装scss/sass,node-sass sass-loader sass 属于重要依赖，所以需-D而不是-S； npm install node-sass sass-loader sass -D 3.根路径下建立文件vue.config.js const path = require('path'); module

vue3+vite scss安装使用

07-27

对于Vue 3和Vite项目，你可以按照以下步骤安装和使用SCSS： 1. 创建新的Vue项目：使用Vue CLI创建新的Vue项目，确保你已经安装了Vue CLI。打开终端并运行以下命令： ``` vue create my-vue-project ``` 按照提示选择配置选项并等待项目创建完成。 2. 进入项目目录：打开终端，进入你的项目目录： ``` cd my-vue-project ``` 3. 安装Vite：由于你想使用Vite作为开发服务器，需要在项目中安装Vite。运行以下命令进行安装： ``` npm install --save-dev create-vite ``` 4. 初始化Vite配置：运行以下命令初始化Vite配置文件： ``` npx create-vite ``` 根据提示选择配置选项并等待配置文件生成。 5. 安装SCSS支持：运行以下命令安装SCSS支持的相关依赖： ``` npm install --save-dev sass ``` 6. 配置Vite以使用SCSS：在项目根目录下找到 `vite.config.js` 文件，并添加以下内容： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue(), ], css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/variables.scss";`, }, }, }, }) ``` 7. 创建SCSS文件：在你的项目中创建一个 `styles` 目录，在该目录下创建一个 `variables.scss` 文件，用于存放你的SCSS变量和样式。 8. 在组件中使用SCSS：在你的Vue组件中，可以直接导入和使用SCSS文件。例如，在你的组件中添加以下代码： ```vue <style lang="scss"> @import "@/styles/variables.scss"; .my-component { color: $primary-color; } </style> ``` 现在你已经成功安装并配置了Vue 3和Vite项目中的SCSS。你可以开始在你的项目中使用SCSS编写样式了！