在vue项目中引入scss，以及解决在main.js里引用scss报错

最新推荐文章于 2024-12-31 17:23:51 发布
原创 最新推荐文章于 2024-12-31 17:23:51 发布 · 4.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #scss #前端 #js

本文介绍如何在Vue项目中安装并配置Sass及其加载器。首先通过cnpminstall命令安装node-sass和sass-loader。由于新版vue-cli已默认配置好sass-loader，故无需在webpack.base.config.js中重复配置。

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

第一步：执行命令

cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev

第二步：切记不需要在webpack.base.config.js中去配置了loader了， 主要原因是新版本的vue-cli已经帮我们把sass-loader配置好了，放在了util.js里面。 一旦配置将会在main.js里引用scss文件时报以下的错

vue-cli的main.js中引入全局scss
qq_38502227的博客
09-03 1920
在最新的vue-cli的main.js中引入scss文件，结果报了以下的错误 我查了很多资料都说是build 文件下util.js 和 base.config.js中重复配置了sass-loader { test: /\.scss$/, use: [ { loader: 'style-loader' // creates style nod...
在vue项目中使用scss经验
前端李小白的博客
04-06 1531
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准
解决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...
vue 项目中 在 main.js 中引入 .scss 文件 报找不到的错误？
qq_42353989的博客
11-11 2828
1. 问题： 你在main.js 下引入 scss 文件 明明路径是正确的， 但是在运行的时候就会提示找不到该文件？ 2.解决： 新版本的vue-cli已经帮我们把sass-loader配置好了，放在util.js里面了 前面我们通过cnpm i node-sass sass-loader -D 安装好了scss依赖 并在build文件夹下的webpack...
vue.js中如何使用scss
weixin_30501857的博客
06-25 139
要使用<style lang="sass">請記得要裝相依的套件 $ npminstallsass-loader node-sass vue-style-loader--D无需为scss/sass配置loader， 使用scss： <style lang="scss" scoped>.swiper-tab-item { transition: ...
【vue】VUE项目中，MAIN.JS引入SCSS文件时报错
庭落
04-24 1704
当我们在src目录下创建.scss文件，并在main.js中引用，运行时会报： ERROR Failed to compile with 1 errors 5:25:07 PM This relative module was not found: * ./main.scss in ./src/main.js 如图所示 解决方法： 新版本的vue-cli已经帮我们把sass-loader配置...
【vue2】main.js引入scss文件报错
胡图图的博客
03-04 639
main.js引入scss文件报错，找不到文件
【SCSS篇】Vite+Vue3项目全局引入scss文件
前端知识分享喵
10-12 5720
Vite+Vue3项目全局引入scss文件
在 vue-cli v3.0 中使用 SCSS/SASS的方法
08-27
如果你希望定义一下全局能够使用的 SCSS 样式，首先需要创建一个 SCSS 文件，然后在项目的 main.js 中使用 import 命令就像导入模块一样，将独立 SCSS 文件全局导入项目。例如：`import "./static/common.scss";` ...
搭建Vue3项目（Vue+js+scss+element-plus+axios）,配置开发环境和运行环境。
最新发布
iuan429520的博客
12-31 635
搭建Vue3项目，安装配置环境变量、代理服务器、路由插件、请求工具axios封装、处理浏览器默认样式等。
【踩坑，VUE项目中，MAIN.JS引入SCSS文件时报错】
Mrchai521的博客
05-17 1412
当我们在src目录下创建.scss文件，并在main.js中引用，运行时会报： ERROR Failed to compile with 1 errors 5:25:07 PM This relative module was not found: * ./main.scss in ./src/main.js 如图所示： 解决方法： 新版本的vue-cli已经帮我们把sass-loader配置好了，放在util.js里面了 前面我们通过 cnpm i node-sass sass-loader -D
html怎么引用scss文件,javascript – 如何从组件中引用SCSS文件的目录？
weixin_39550940的博客
06-15 597
我尝试以下成功(使用纯HTML和Scout-App将SCSS转换为CSS)：编辑：如前所述,我从未使用过React,但是基于这个帖子hugogiraudel.com,它应该与我的解决方案(或多或少/一见钟情)相同.编辑2：我刚刚在几天前开始使用SCSS.据我所知,我唯一的错误就是我的例子中显示的打字错误.由于应用了“body”,所以假定您的组件中的import语句对于React是正确的.如果有更好...
vue2下main.js中引入less/scss报错，只能引入css文件。解决：直接在build下的utils.js中引入所有的样式文件
qq_43563070的博客
07-20 1100
'use strict' const path = require('path') const config = require('../config') const ExtractTextPlugin = require('extract-text-webpack-plugin') const packageConfig = require('../package.json') //处理样式路径 exports.assetsPath = function (_path) { const asset.
SCSS
timeares的博客
04-10 910
一、Scss 1.语法 变量 使用$符号开头遵循css选择器 可以包含-,_。尽量见名知意 $jd_red: #f00; 颜色变量 $my-width: 20px; 数值变量 $normal-content: “见名知意”; $my-border-style:solid; 样式变量 $my_border: 1px solid $jd_red; 变量中引入其他变量 注意： 1.声明变量时，变量定义在{}规则块外边 则整个样式文件都可以调用。如果定义在{}规则块里面 则只能在规则块{}里面使用，规则块
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
赏樱看雪撸代码
12-01 1万+
vue项目部署CSS失效，css样式加载无效，nginx部署css失效，css文件404，服务器样式失效 部署项目css失效
在安装了node-sass sass-loader 之后 main.js 中引入样式总是起不来项目 并报错Module build failed: TypeError: this.getResolv
u013100927的专栏
12-18 321
npm uninstall sass-loader（卸载当前版本）卸了重新安装了一个低版本的就好了。npm install sass-loader@7.3.1 --save-dev
Vue3项目实战准备------音乐播放器（开源项目）(一)
MX_muxiao的博客
06-07 1475
一个基于vue3的简易音乐播放器移动端的搭建，及过程中遇到的问题
Vue.js中scss的使用
Corn___的博客
08-11 647
Vue.js中scss的引入
如何在vue项目中引入scss,并使用scss样式
weixin_61145649的博客
05-09 1万+
如何在vue项目中引入并配置scss
怎么在vue项目里添加scss
10-10
在Vue.js项目中添加SCSS，你可以按照以下步骤操作： 1. **安装Node.js和npm**：首先确保你的项目已经有一个有效的Node环境，如果没有，访问https://nodejs.org/ 下载并安装。 2. **全局安装工具**：打开终端或命令...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值