vue 全局使用scss的坑

最新推荐文章于 2024-01-09 11:34:15 发布
最新推荐文章于 2024-01-09 11:34:15 发布
阅读量908 收藏
点赞数
文章标签： vue scss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39351190/article/details/103808851
版权

npm install sass-loader@7.3.1 --save-dev（安装高版本的会报错 这个耗费了我一个小时）
npm install node-sass --sava-dev
npm install sass-resources-loader --save-dev

删掉
因为新版本的vue-cli已经帮我们把sass-loader配置好了，不然你要是在main.js引入scss会报错

main.js 并不能在vue里面使用 用下面的方法可以使用

npm install sass-resources-loader --save-dev
 


加上这段代码 就可以使用了 全局scss了，

网上百度的挺多的，大部分都比较凌乱 心累

猿计划
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 中使用全局scss
sw_onload的博客
10-21 282
css的全局样式可以在html中通过link引入，但scss不行，也不能在main.js中引入，只能在配置文件中设置 <link rel="stylesheet" href="static/style/reset.css" type="text/css"> 1、首先要安装scss依赖 npm install node-sass --save-dev npm install sass-loader --save-dev npm install style-loader --save-dev n
vue 之使用 scss 的全局变量
04-07
vue 之使用 scss 的全局变量
解决vue scoped scss 无效的问题
11-19
今天遇到scoped内部的scss设置无效，解决办法如下： /deep/ <style scoped lang="scss"> .position-el-steps { /deep/ .el-step.is-vertical { .el-step__description { margin-top: -20px; } .el-step__line { border-left: 2px dashed #c0c4cc; background-color: transparent; visibility: visible !important; } } } 补充知识：【
在vue.config.js文件中设置全局scss不生效问题
weixin_44466741的博客
05-07 1333
module.exports = { lintOnSave:false, // 定义一个css模块--start css:{ loaderOptions:{ scss:{ /* scss版本bug:若版本低于7，则使用data；高于8，则使用preprendData */ data:"@import './src/styles/scssconfig.scss';" } } }, .
Vue项目引入全局scss变量引用失败
orange_girls的博客
09-19 1349
Vue项目引入全局scss变量引用失败
vue3.0项目中全局注入scss样式不生效原因
XUELINGMM的博客
05-16 3742
原来这不是一个bug，只有在main.js引入一个其他scss文件或者在.vue文件中使用，并且里面有内容（猜测因为配置文件是在每个 vue 文件单独引入的原因），则 scss.additionalData 配置的全局scss文件就可以正确引入了
Vue3+scss 组件内部使用全局样式不生效
Cxiaomu的博客
08-01 1807
全局配置了scss样式，部分组件内部使用全局样式不生效 遇到这个问题时，发现在views组件中使用的样式能生效，但是子组件内使用的就不能生效，通过控制台查看，class绑定上了，但是对应的css样式没找到。
vue-scss-variable-scan:让vscode在vue文件中提示scss自定义变量
04-29
vue-scss变量扫描这是一个扩展，允许vscode在Vue和Scss文件中提示SCSS的自定义变量。扩展设置有以下四个设置： vue-scss-variable-scan.globalPath ：SCSS扫描变量的路径（默认值：src / ** / *。scss） vue-scss-...
详解Vue 全局引入bass.scss 处理方案
12-09
为解决在Vue组件中全局引入 scss 变量及 mixins ，装载了一个名为 “sass-resources-loader” 解析器。 安装 $ > cnpm i -D sass-resources-loader 配置 配置的话是在 vue 的 loader 解析器中配置，即在 vue-cli ...
Vue2.0设置全局样式(less/sass和css)
08-28
主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在 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 生成项目时，需要勾选 ...
uniapp使用scss变量报错/无效
lys20000913的博客
05-19 2506
uniapp使用scss变量无效/报错
解决Vue在main.js全局引入scss文件，组件里使用scss变量报错问题
热门推荐
qq_40532145的博客
09-09 2万+
报错：Syntax Error: SassError: Undefined variable. 我一开始的引入方式是这样的： 以为在main.js全局引入了就一劳永逸，写着常规css样式时还好好的，用到scss变量时就报错了。· 解决方法一 在需要用到的 .vue 文件里单独引用 variable.scss 变量文件，but达不到我们想要的“一劳永逸“效果 可能还会有奇奇怪怪的潜在问题，建议使用方法二。 · 解决方法二 配置vue.config.js文件，使得全局都能使用sc...
vue3 + vite 导入公共scss文件无效的问题
samscat的博客
03-22 4757
以下是vite.config.js的相关配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' const isProduction = false; // https://vitejs.dev/config/ export default defineConfig({ // 在生产中服务时的基本公共路径 base: isProduction ? './
vue cli3 配置sass全局变量设置不生效，sass混合器文件全局引入
我说我是学霸你信吗的博客
05-08 3233
vue cli3 配置sass全局变量的问题首先确保依赖安装完整找到vue.config.js加入配置信息 首先确保依赖安装完整 1.node-sass 2.sass-loader 3.style-loader 如果没有安装，运行一下命令安装 npm install node-sass sass-loader style-loader --save 找到vue.config.js加入配置信息 m...
sass/scss calc表达式中使用变量不生效解决
weixin_42634398的博客
05-17 555
calc表达式中使用变量不生效但是如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式使用。官网查看后 发现要使用插值语句包裹变量才能使用 --蓝色剪头标注的方式。在css计算属性中使用自定义的变量进行计算，不生效。–红色剪头标注的方式。一般我们定义的变量都为。
vue项目中使用scss
weixin_45665171的博客
03-29 1万+
vue项目中安装、引入、使用scss
vue项目如何配置全局 scss 样式文件
最新发布
yajia2的博客
01-09 874
在开发过程中经常会有很多相同得样式需要修改等问题，这样我们可以配置全局得css样式有利于后期得维护，那么改如何配置呢首先，确保你的项目已经安装了sass-loader和node-sass依赖。1.在根目录下新建 `assets\styles` 文件夹，用于存放全局样式。我项目中用到得。
vue3中如何设置全局使用scss
06-09
在 Vue 3 中设置全局使用 SCSS，可以在 `src` 目录下新建一个 `main.scss` 文件，并在 Vue 项目的入口文件 `main.js` 中引入该 SCSS 文件。具体步骤如下： 1. 在 `src` 目录下新建 `main.scss` 文件，并写入全局 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值