vue 全局使用scss的坑

最新推荐文章于 2023-05-19 14:52:56 发布
最新推荐文章于 2023-05-19 14:52:56 发布
阅读量959 收藏
点赞数
文章标签： vue scss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39351190/article/details/103808851
版权
本文详细介绍了在Vue项目中如何正确配置并使用SCSS全局样式，包括安装和配置必要的loader如sass-loader、node-sass和sass-resources-loader等步骤。避免了在main.js直接引入SCSS文件导致的错误，提供了有效的解决方案。

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

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了，

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

猿计划
关注
vue 中使用全局scss
sw_onload的博客
10-21 363
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
【SCSS篇】Vite+Vue3项目全局引入scss文件
最新发布
前端知识分享喵
10-12 5644
Vite+Vue3项目全局引入scss文件
Vue2.0设置全局样式(less/sass和css)
08-28
主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue全局使用scss
qq_48772601的博客
01-13 252
vue中全局使用scss
shichong123的博客
10-09 1331
在vue中全局使用scss需要先安装 sass-resources-loader，使用npm install sass-resources-loader --save-dev 命令安装。 然后在util.js文件夹里修改： return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoad...
vue中全局引入scss
酒馆不打烊
06-15 416
在项目的根目录下新建一个vue.config.js文件，配置如下，这样就不需要在页面引入公共的scss文件了，全局都能访问的到 module.exports={ css: { loaderOptions: { sass: { // 旧版本 data:`@import "@/style/mixin.scss";` // 新版本
vue 之使用 scss 的全局变量
04-07
vue 之使用 scss 的全局变量
vue3.2中使用scss全局变量【2022.04.27最新方法】
m0_58039950的博客
04-27 3171
vue3.2中使用scss全局变量【2022.04.27最新方法】
vue+scss全局使用mixin方法
周家大小姐
11-03 2188
先自行安装scss 或者安装如下1.0版也可 npm install sass-loader@10.1.1 --save-dev npm install node-sass --sava-dev 想要在vue-cli中全局使用 scss的全局变量和 @mixin样式混入，需要安装插件，然后在 vue.conf.js 中配置 npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev vue.
在 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 全局引入bass.scss 处理方案
12-09
为解决在Vue组件中全局引入 scss 变量及 mixins ，装载了一个名为 “sass-resources-loader” 解析器。 安装 $ > cnpm i -D sass-resources-loader 配置 配置的话是在 vue 的 loader 解析器中配置，即在 vue-cli 脚手架方式构建出来的文件中是以 build/utils.js，在该文件中定义了 cssLoaders() 方法，该方法定义了诸如 css、less的解析方式，具体如下。 // build/utils.js exports.cssLoaders = function (options) { op
vue 导入全局scss
weixin_45345105的博客
03-02 210
scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, './..//src/assets/css/gobal.scss') //这里是单独建的存放变量的scss，我的是 var.scss } .
在vue.config.js文件中设置全局scss不生效问题
weixin_44466741的博客
05-07 1486
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 1571
Vue项目引入全局scss变量引用失败
Vue项目中v-bind动态绑定src路径不成功问题及解决
快乐de馒头
07-30 5984
当动态绑定img的src的时候，vue数据绑定图片的相对路径或者是绝对路径的时候，需要require路径。
解决使用vue-cli搭建的项目无法使用scss的问题
wulincoo
06-22 779
转载地址 在 App.vue 下使用 scss 语法报错： 解决方法： 安装以下依赖就可以了，vue-cli默认没有scss-loader,scss-loader又需要node-sass，只安装scss-loader是不行的。另外webpack就不需要配置了，因为vue-cli会帮你配置安装的loader 输入如下命令： npm install node-sass --save npm install sass-loader@7.3.1 --save-dev npm install scss-loader
uniapp使用scss变量报错/无效
lys20000913的博客
05-19 3383
uniapp使用scss变量无效/报错
vue3 + vite 导入公共scss文件无效的问题
samscat的博客
03-22 5278
以下是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 ? './
sass/scss calc表达式中使用变量不生效解决
weixin_42634398的博客
05-17 896
calc表达式中使用变量不生效但是如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式使用。官网查看后 发现要使用插值语句包裹变量才能使用 --蓝色剪头标注的方式。在css计算属性中使用自定义的变量进行计算，不生效。–红色剪头标注的方式。一般我们定义的变量都为。
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、付费专栏及课程。

余额充值