在vue项目中使用scss经验

最新推荐文章于 2022-09-22 13:39:56 发布
最新推荐文章于 2022-09-22 13:39:56 发布
阅读量1.5k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： scss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42268364/article/details/115460373
本文介绍了在Vue项目中使用scss的实践经验，包括在assets/styles文件夹下的组织结构，如element-ui、Variables等模块。文章提到了使用Normalize.css进行样式重置，并通过npm安装。此外，还讲解了配置style-resources-loader来管理全局scss变量，以及scss的变量做calc计算和导出颜色等常见用法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、在assets文件夹下的styles中，文件结构如下：
在这里插入图片描述

  • element-ui ele的组件样式
  • element-variables ele主题颜色变量
  • Index 项目全局样式
  • Mixin 混入样式
  • Transition 动画样式
  • Variables 项目样式变量

2、重置css样式

Normalize.css是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案

  1. npm install --save normalize.css
  2. 在mian.js中
import 'normalize.css/normalize.css'
import './assets/styles/element-variables.scss' // element-ui scss
import './assets/styles/index.scss'
最低0.47元/天 解锁文章

200万优质内容无限畅学
vue-cli2项目中使用scss
Hi_MrXiao的博客
05-21 1195
首先要搞清楚Sass和Scss的区别：实际上Sass和Scss是同一种东西，Scss是 Sass3 引入新的语法，它们都是css预处理器。：Sass 默认使用“.sass”作为文件扩展名，而 Scss 使用“.scss”作为扩展名。：Sass 最初是以严格的缩进式语法规则来书写，不带大括号和分号，这种方式使得代码更加简洁，但在某些情况下可能不如Scss直观易读；相比之下，Scss的语法允许使用大括号和分号，与常规的 css语法相似，这使得 Scss更容易被 css开发者接受和使用。
如何使用VuePress搭建一个类型element ui文档
10-17
主要介绍了如何使用VuePress搭建一个类型element ui文档，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue scss
我的征程
04-12 555
在vue中使用scss npm install node-sass sass-loader --save-dev <style lang="scss" scoped> ... </style>
[Vuejs] 在vue各个组件中应用全局scss变量
weixin_30810583的博客
05-17 534
需要安装一个插件：sass-resources-loader 1、执行安装命令： npm i sass-resources-loader --save-dev 2、修改vue-cli环境下build文件夹下utils.js，找到scss加载位置： return { css: generateLoaders(), postcss: generateLoader...
vue 使用 scss
qq_38352793的博客
08-29 372
1全局引入scaa文件 参考链接： https://segmentfault.com/q/1010000007852596 https://vue-loader.vuejs.org/… 先安装 npm install sass-resources-loader –save-dev， 然后把scss: generateLoaders(‘sass’)替换成如下代码 scss: gener...
vue使用scss
qq_42430948的博客
01-25 634
注意：这里用的是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的方法步骤
10-16
在Vue项目中使用Sass (SCSS) 预处理器是一种常见的做法，它能够帮助开发者享受到更加灵活和功能强大的CSS编写方式。为了实现这一目标，开发者需要按照一定的步骤配置项目，以便正确地引入和使用SCSS。 首先，需要...
在 vue-cli v3.0 中使用 SCSS/SASS的方法
08-27
在 Vue-cli V3.0 中使用 SCSS/SASS 的方法 在 Vue-cli V3.0 中使用 SCSS/SASS 是一个非常重要的知识点，下面我们将详细介绍如何在 Vue-cli V3.0 中使用 SCSS/SASS。 首先，在使用 Vue-cli 生成项目时，需要勾选 ...
vue 使用scss
qq_44146522的博客
05-17 327
//下载 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
ruarua的博客
11-12 1213
在vue中使用scss
在vue中使用scss
weixin_39814577的博客
05-23 409
1.安装ruby 2.再使用 gem install sass 来安装sass 3.在项目中使用npm安装scss-loader和node-scss npm install scss-loader --save-dev npm install node-scss --save-dev 4.在build/webpack.base.cof.js文件中的rules中加入scss编译规则 ...
VUE项目使用SCSS
抚首
05-25 221
系统报的错误： 解决方法： npm install node-sass@latest
vue 中使用scss
weixin_30879833的博客
05-27 210
1.下载 npm install --save-dev sass-loader npm install --save-dev node-sass npm install sass-loader --save-dev 2.使用 vue1中 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.sass$/, loade...
vue中使用scss
田兴的博客
01-07 668
1、安装 npm install node-sass --save-dev npm install sass-loader --save-dev 2、配置 在build中的 webpack.base.conf.js 文件中，找到rules，添加 // 在 rules中添加 { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } 3...
vue 安装 scss
金乌的博客
09-22 1万+
node-sass与 node 版本不兼容时，如果node版本过高时，最好对node版本进行降级，升级node-sass可能有隐藏风险；如果sass版本过高，可以卸载sass，重新安装指定版本。安装scss (安装sass-loader node-sass 前者依赖于后者)node-sass：nodejs环境中将sass转css。安装指定版本：当由于版本过高报错时，可以指定要安装的版本。sass-loader：把 sass编译成css。安装速度很慢时，可以尝试镜像安装。
scss在Vue中的安装及使用
热门推荐
IT菜鸟
06-20 2万+
一、安装 npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的！ 二、配置文件...
vite的vue项目中使用scss
05-30
要在Vite的Vue项目中使用SCSS，您需要遵循以下步骤： 1. 安装sass和sass-loader依赖： ```bash npm install sass sass-loader -D ``` 2. 在Vite配置文件（vite.config.js）中添加以下内容： ```javascript import vue from '@vitejs/plugin-vue' export default { plugins: [vue()], css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/variables.scss";` } } } } ``` 这将告诉Vite使用SCSS预处理器，并导入指定的变量文件。 3. 创建一个名为variables.scss的文件，并在其中定义您的变量： ```scss $primary-color: #007bff; $secondary-color: #6c757d; // 其他变量... ``` 4. 在Vue组件中使用SCSS： ```vue <template> <div class="example"> <p class="primary-text">Hello, world!</p> </div> </template> <style lang="scss"> .example { background-color: $primary-color; .primary-text { color: $secondary-color; } } </style> ``` 这将使用在配置文件中导入的变量，并将其应用于样式中。 希望这能帮助到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值