vue项目配置sass，引入外部scss文件

最新推荐文章于 2024-09-27 18:05:43 发布
最新推荐文章于 2024-09-27 18:05:43 发布
阅读量4.6k 收藏 4
点赞数 1
分类专栏： 《vue全家桶》
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41698051/article/details/88843184
版权

配置sass

安装对应依赖node模块

npm install node-sass --save-dev
npm install sass-loader --save-dev

引入外部scss文件

在main.js中引入需要的scss文件
在这里插入图片描述

如果显示错误为如下图所示

在这里插入图片描述

打开webpack.base.config.js，删除掉注释部分的代码。因为vue-cli 项目里面配置了编译scss的，只要你装node-sass 和sass-loader，不需要自己添加配置。

记住，此时需要重启项目 npm run dev

在这里插入图片描述

Vue引入sass并配置全局变量的方法
08-27
主要介绍了Vue引入sass并配置全局变量的方法
vue --- 项目中引入sass
weixin_41652031的博客
12-04 2930
1.引入外部css vue脚手架搭建的项目".vue"文件下方会有style标签，供我们书写css，但我们为了实现结构样式相分离就需要在外部书写css，这样代码看起来更清晰。 首先我们在assets文件夹下建立css文件夹用来保存我们的css文件，在css文件中直接书写css代码，在".vue"文件中的script标签里使用import引入assets里的样式 import '../ass...
Node Sass version 7.0.0 is incompatible with ^4.0.0 ^5.0.0 ^6.0.0报错解决方案
m0_54853503的博客
03-08 658
今天在写Vue页面的时候，根据教程，我要安装sass-loader与node-sass，但是在安装完成后运行项目的时候，报出如下错误： Node Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0 解决方案如下 不要再使用node-sass了，要用sass替代它。 如果你想在你的应用中使用scss或者sass，需要这样做： 首先卸载原来安装的node-sass yarn remove node-sass 如果使用的
Vue2.x 如何引入SASS(SCSS)或者LESS
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-27 1072
[toc](Vue2.x 如何引入SASS(SCSS)或者LESS)在Vue.js 2.x项目中，使用预处理器如SASS(SCSS)或LESS可以提高CSS的组织性和可维护性。这些预处理器提供了变量、嵌套规则、混合（mixins）、继承等功能，使得CSS的编写更加高效和灵活。本文将详细介绍如何在Vue 2.x项目中引入并使用SASS(SCSS)和LESS，并通过具体的示例来展示其配置过程和使用方法。
Sass 常规操作知识点(及引入 .scss文件方法)
summer_cloudy的博客
06-23 2128
sass常用操作
vue项目中使用scss
热门推荐
weixin_45665171的博客
03-29 1万+
vue项目中安装、引入、使用scss
vue全局配置scss，在vue文件使用scss
是清伊呀丶的博客
02-18 902
下面是对scss文件的配置 1.安装sass-resources-loader npm i sass-resources-loader --save-dev 2.修改build文件夹下utils.js，下面的options路径就是你要配置的scss文件的绝对路径 // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: gener
vue脚手架中配置Sass的方法
08-28
配置完成后，你就可以在 Vue 组件的 `.scss` 样式中使用 Sass 的特性了。 ### Sass 的主要特性 1. **变量**： - 变量是 Sass 最基础也是最重要的特性之一。使用 `$` 符号定义变量，如 `$back: red;`。在样式中，...
vue项目中全局引入1个.scss文件的问题解决
12-12
首先先发一下我的项目路径 1. 首先要下载 sass-resources-loader npm install sass-resources-loader --save-dev 2.然后再文件夹build/utils里面的更改 scss: generateLoaders('sass') scss: ...
vue项目中引入Sass实例方法
12-09
在Vue项目中引入Sass是一种常见的做法，因为Sass提供了许多CSS不具备的特性，如变量、嵌套规则、混合、函数等，极大地提高了CSS的可维护性和可读性。下面我们将详细讲解如何在Vue项目中集成Sass。 首先，确保你的...
在vue项目中使用sass语法问题
10-16
在Vue项目中使用Sass，首先需要确保项目能够识别和处理.scss文件。通常情况下，Vue项目使用Webpack作为构建工具，因此你需要安装专门的loader来处理Sass文件。根据文章中的描述，安装过程主要包含以下步骤： 1. ...
vue中使用scss
田兴的博客
01-07 646
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文件
竹叶轻拂水
11-12 7556
我们在写项目的时候难免会遇到多个文件的样式大致相同的情况，为了减少冗余代码，可以将重复样式提取出来，然后在每个页面引入
vue项目使用scss 遇到的问题 总结
xiaomanonyo的博客
09-22 2051
首先 项目中引入的命令 npm install sass-loader@7.3.1 --save-dev npm install node-sass --save npm install style-loader --save 不能直接使用npm install sass-loader --save-dev，因为当前sass的版本太高，webpack编译时出现了错误，所以指定：npm install sass-loader@7.3.1 --save-dev 安装低版本的。 很多文章说要在build..
vue中配置sass,scss的方法
大山博客
06-30 1272
第一、在安装完vue的框架后，在对应终端中输入代码 npm install node-sass –save-dev npm install sass-loader –save-dev 有的是位置调换 都是没差别的 npm install –save-dev node-sass npm install –save-dev sass-loader 按照下面代码执行 npm inst...
vue项目如何使用.scss文件以及安装依赖遇到的各种问题
小猫爪子
05-13 785
只有使用类似这样的指令，依赖包在package.json中才会有记录，别人在clone这个项目之后，cnpm install才可以下载到所有的依赖包。
vue项目中引入 scss
蓝胖子的博客
02-15 2645
①安装sass 依赖包 ，在cmd界面输入： npm install sass-loader --save-dev npm install node-sass --sava-dev 1.1下载指定版本 npm i -D sass-loader@7.1.0 npm install node-sass --sava-dev ② 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: / \.scss$ /, loade
vue3,配置scss文件自动导入
yuyuyuyuyuyyuuyu的博客
06-17 788
【代码】vue3,配置scss文件自动导入。
vue中css和scss的外部引入的三种方法以及图片的引入
weixin_48047636的博客
05-26 2768
App.vue <template> <div> <img src="./assets/logo.png" alt="" /> <nine-com /> <eight-com /> <div class="danger">DANGER</div> <div> <p>rain</p> <p>sky</p&g
vue引入外部scss文件
03-31
要在Vue项目中引入外部的SCSS文件，需要在main.js文件中导入SCSS文件，然后使用Vue CLI的vue-loader配置将SCSS编译为CSS。 以下是如何在Vue项目中导入外部SCSS文件的步骤： 1. 在项目的根目录下创建一个名为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值