vue项目如何使用scss

最新推荐文章于 2024-05-25 16:16:41 发布

原创最新推荐文章于 2024-05-25 16:16:41 发布 · 423 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue上使用scss

scss 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在Vue项目中使用SCSS的两种常见方式：直接在.vue文件中使用和通过单独的.scss文件引入。文章详细解释了如何通过npm安装必要的依赖，包括node-sass和sass-loader，并提供了在不同场景下使用SCSS的具体步骤。

vue使用scss的两种方法

- 第一步，在vue文件上使用scss
第二种使用方法，单独建scss文件
- 如果要安装指定的版本，如：7.1.0

#首先npm安装scss
npm install node-sass --save-dev
npm install sass-loader --save-dev

第一步，在vue文件上使用scss

其中lang="scss"为必须，scoped是声明只在改文件上使用
直接在vue文件上使用，其中lang="scss"为必须，scoped是声明只在该文件上使用

第二种使用方法，单独建scss文件

新建scss文件夹，用来装scss文件，然后使用在main.js文件上import './scss/××.scss’引入对应scss

如果要安装指定的版本，如：7.1.0

npm install sass-loader@7.1.0 --save-dev

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

热心肠的小哥

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue3 使用scss

2012年开始工作，全栈开发老兵，目前已是一个老师，分享这么多年的心得体会

09-02

841

SCSS 语法使用.scss文件扩展名。除了极少部分的例外，它是 CSS 的超集，也就是说所有有效的 CSS 也同样都是有效的 SCSS。由于其与 CSS 的相似性，它是最容易上手的语法，也是最流行的语法。

vue项目中使用scss出错解决方法

Debug的博客

10-24

5525

vue 使用scss报错 this.getOptions is not a function 通过npm安装sass npm install node-sass npm intall sass-loader 上面命令安装的是最新版的，出现错误的原因就是安装最新版的导致getOptions()不兼容解决方案就是卸载sass-loader，安装低版本，命令如下 npm uninstall sass-loader //卸载 npm install sass-loader@8.0.0 //安装8.0 .

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

vue项目中使用scss的方法步骤

10-16

主要介绍了vue项目中使用scss的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

SCSS 基本使用详解

最新发布

2301_79262050的博客

05-25

4143

SCSS 是 Sass（Syntactically Awesome Stylesheets）的其中一种语法，是一种预处理器脚本语言，能够扩展 CSS 的功能，使其更加强大和高效。SCSS 保留了 CSS 的原有语法，同时增加了变量、嵌套规则、混合宏（mixin）、继承等高级功能。本文将详细介绍 SCSS 的基本使用方法，帮助读者快速上手并掌握 SCSS 的核心概念和技巧。

SCSS最全使用方式

weixin_68658847的博客

04-27

885

SCSS最全使用方式

vue项目中使用scss

weixin_33725272的博客

06-16

243

一概述随着sass/less等css预处理器的出现，编写css变的越来越有乐趣。所以现在越来越多的人在项目中喜欢使用scss或者less。（我自己就是一个）。由于最近在写一个vue项目。所以就把写项目期间每天的一些知识点写在博客里。所以最近的博客应该都会和vue有关。今天要和大家分享的就是如何在vue项目中引入scss（引入less也...

vue-cli2项目中使用scss

Hi_MrXiao的博客

05-21

1353

首先要搞清楚Sass和Scss的区别：实际上Sass和Scss是同一种东西，Scss是 Sass3 引入新的语法，它们都是css预处理器。：Sass 默认使用“.sass”作为文件扩展名，而 Scss 使用“.scss”作为扩展名。：Sass 最初是以严格的缩进式语法规则来书写，不带大括号和分号，这种方式使得代码更加简洁，但在某些情况下可能不如Scss直观易读；相比之下，Scss的语法允许使用大括号和分号，与常规的 css语法相似，这使得 Scss更容易被 css开发者接受和使用。

vue项目使用scss

qq_17627195的博客

10-13

3260

安装sass 依赖包 npm install sass-loader --save-dev npm install node-sass --sava-dev npm install vue-style-loader --sava-dev vue-loader是一个webpack的loader。用来把vue组件转换成可部署的js,html,css模块。所以我们如果要想再vue项目中使用scss，肯定要告诉vue-loader怎么样解析我的scss文件。在webpack中，所有预处理器都要匹配相应的l.

Vue中使用 Scss 实现配置、切换主题

明天也要努力的博客

10-20

3910

本项目中的公共样式文件均位于 src/assets/css 目录下，其中 index.scss是总的样式文件的汇总入口，common.scss 是供全局使用的一些基本样式(常量）， _theme.scss、_handle.scss 两个文件是进行主题颜色配置的文件。如下图，将 index.scss 在 main.js 文件中引入即可全局使用。

如何在vue项目中使用scss

sslcsq的博客

12-20

341

我们知道一个组件中分为 <template> //结构 <script> //逻辑行为 <style> //样式在style中编写样式如何使用scss呢首先下载依赖包： cnpm install node-sass sass-loader@7.3.1 --save 2、在build文件中打开webpack.base.config.js在rules里面...

如何在VUE项目中使用SCSS

qq_45100858的博客

10-23

595

vue项目上安装SCSS和开发入门 ① 使用vue-cli模板创建新项目： vue init webpack myvue ② 安装sass 依赖包，在cmd界面输入： npm install sass-loader --save-dev npm install node-sass --sava-dev ③ 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/, loaders: ['style', 'css', 'sass'] }

在VUE项目中使用SCSS

浩星

02-02

1919

当vue项目已将建立好以后，只需要三步：第一，安装scss依赖 npminstall sass-loader --save-devnpm install node-sass --sava-dev 第二：在build文件夹下的 webpack.base.conf.js 的 rules 里面添加配置 { test: /\.scss$/, loaders: ['st...

vue 使用scss

qq_44146522的博客

05-17

346

//下载 cnpm install node-sass --save cnpm install sass-loader --save cnpm install scss --save cnpm install scss-loader --save //cnpm install node-sass sass-loader scss scss-loader --save cnpm install sass-loader@10.1.0 npm install node-sass@4.14.1

vue使用scss

qq_42430948的博客

01-25

659

注意：这里用的是vue-cli@3.x创建的项目，至于vue-cli@2.x创建的项目并不适用该文章写的方法。 1.使用vue-cli@3.x创建项目 vue create demo 2.安装scss相关的包 npm install -S node-sass sass-loader 3.安装完成之后，你就可以写scss语法了，只需要在组件中的style标签加上lang属性：< style lang=“scss” scoped >。 4.第三步可能会遇到报错，这个时候你只需要终止项目运行，然后再

Vue使用scss

Tomonkey的专栏

03-31

270

在Vue中使用scss

ruarua的博客

11-12

1241

在vue中使用scss

vue2项目使用scss

05-10

要在 Vue2 项目中使用 SCSS，需要安装 `sass-loader` 和 `node-sass` 两个依赖。 1. 安装依赖 ``` npm install sass-loader node-sass --save-dev ``` 2. 配置 webpack 在 `webpack.base.conf.js` 中添加以下代码： ```javascript module.exports = { // ... module: { rules: [ // ... { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ] } ] } } ``` 3. 创建 SCSS 文件在 Vue 组件的 `<style>` 标签中，将 `lang` 属性设置为 `scss`，并创建 SCSS 文件。 ```html <template> <div> <h1>{{ message }}</h1> </div> </template> <style lang="scss"> $primary-color: #007bff; h1 { color: $primary-color; } </style> <script> export default { data() { return { message: 'Hello, world!' } } } </script> ``` 以上就是在 Vue2 项目中使用 SCSS 的步骤。