vue 在webpack 环境下的 sass使用

已于 2022-05-17 11:25:29 修改
阅读量1k 收藏
点赞数
分类专栏： # Webpack 文章标签： sass vue.js webpack
于 2022-02-18 13:57:42 首次发布
原文链接：https://www.cnblogs.com/wuchongyou/p/9592518.html
版权

亲测可用，若有疑问请私信

1,安装sass的依赖包cnpm install --save-dev sass-loader 和 cnpm install --save-dev node-sass、

2，在build文件夹下的webpack.base.conf.js的rules里面添加配置

　　{ test: /\.sass$/, loaders: ['style', 'css', 'sass']}

3，在vue 文件中引入sass文件：

　　

　　然后就可以初步使用sass来写样式了

以上步骤中存在一个隐患，那就是当在scss文件中使用背景图片时，webpack会因为引入的图片路径不正确而报错

4，将scss文件的引入方法从vue文件里面放到main.js里面引用，如图所示

PrinciplesMan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决WARNING in configuration The ‘mode‘ option has not been set, webpack will fallback to ‘production‘
sonsmart的博客
06-09 1729
安装好webpack后，运行webpack打包时会出现报错：WARNING in configuration The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment. You can also set it
webpack+vue 构建项目步骤并且使用sass 安装配置
qq_36416878的博客
03-22 2243
1、官网先下载node.js 安装之后,cmd 运行 node -v npm -v 查看是否安装好2、利用npm安装webpack  命令行语句： npm install webpack -g 安装完查看是否安装好 webpack -v3、安装淘宝镜像：npm install -g cnpm --registry=http://registry.npm.taobao.org4、安装vue-cli脚...
Vue组件库必备 Sass(Dart) 知识
前端攻城狮
08-14 4122
Dart Sass 是Sass 的主要实现版本，这意味着它集成新功能要早于任何其它的实现版本。 Dart Sass 速度快、易于安装，并且可以被编译成纯JavaScript 代码，这使得它很容易集成到
webpack初始化与基本配置
xin_jiao的博客
12-25 920
文件夹，然后在阿里巴巴矢量图标库中下载图标（这里使用 Font class 的使用方式），将下载的字体文件放到。webpack 的打包环境，需要打包的文件等，这 样每次打包都要输入很长的命令，非常麻烦。，所以就需要在原有的基础上 新增一个 webpack 的配置文件，在项目根目录新增一个。main.js 文件（这是 默认行为，可以指定打包后的位置和文件名称），所以还需要在。webpack，然后传入需要打包的文件就可以了。webpack 的执行依赖， 能够命令式的执行。
react项目中在webpack配置sass
skybulex的博客
07-13 1171
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.module.rules[1].oneOf[10] has an unknown property 'loaders'. These properties are valid: object { assert?, compi
vue cli webpack中使用sass的方法
08-27
在 Vue CLI 项目中使用 SASS 需要安装相应的依赖项和配置loader，下面将详细介绍 Vue CLI Webpack 中使用 SASS 的方法。 安装依赖 首先，需要安装 SASS 相关的依赖项，使用 npm 安装 sass-loader 和 node-sass： ...
手动使用webpack配置vue3开发环境
最新发布
05-09
在 `src` 目录下创建 `main.js` 作为应用入口，`App.vue` 作为根组件，以及其他必要的组件和文件。 手动配置开发环境虽然相对复杂，但它允许开发者对整个构建流程有更深入的理解和控制。随着项目的复杂性增加，这种...
在vue项目中使用sass的配置方法
08-27
在 Vue 项目中使用 Sass 的配置方法 在 Vue 项目中使用 Sass 需要进行一些配置，以下是详细的配置步骤。 第一步：创建新项目 首先，我们需要创建一个基于 Webpack 模板的新项目。我们可以使用 Vue CLI 来创建项目...
vue2.0项目中使用sass(含sass基础用法示例)
热门推荐
李大人的博客
02-21 5万+
Sass是一种CSS扩展语言，目前广泛地应用到web项目开发中，使用sass可以用更少的代码去实现CSS同样的样式效果，在书写上也更为简洁，其原理是通过一定的规则转化为对应的CSS样式，可以说是样式中的“高级语言”。Sass在日常的开发中，是需要通过转换工具转成CSS再引入到HTML文件中，然而，在vue的webpack项目模板中，引入解释sass文件的loader，即可使用sass。本文将展示v...
使用webpack处理scss、sass、styl资源
m0_68997646的博客
11-01 1086
使用webpack处理scss、sass、styl资源
webpack配置sass模块的加载的方法
08-29
本篇文章主要介绍了webpack加载sass配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack支持scss文件，webpack sass配置
weixin_46787337的博客
07-12 1182
注意：这里是个坑，如果你在前端项目上配置webpack一定要安装的是而不是,这两个依赖不要同时装，同时装的话webpack优先使用那么就会报错
【webpack】webpack.base.conf.js基础配置
weixin_30378311的博客
11-25 452
var path = require('path') // node路径模块var utils = require('./utils') // 对vue-loader对于css预编译一些提取的工具模块，因为对于个人开发而言，在里面提供了，sass,less,stylus,possCss等一些列预编译解析的loadervar config = require('../config') //...
webpack里怎么配置Sass,非常实用！！！
youjinli122的博客
08-25 3074
在webpack里配置sass初次使用者一定是一脸懵逼。我也是试了很多次，在vue-cli里最佳的配置方法： 步骤一：安装依赖包npm install node-sass --save-dev npm install sass-loader --save-dev步骤二：打开webpack.base.config.js在loaders里面加{ test: /\.scss$/, loade
webpack学习（九）：配置sass
qq593249106的博客
12-09 1118
demo地址: https://github.com/Lkkkkkkg/webpack-demo 继上一次配置完react: https://blog.csdn.net/qq593249106/article/details/84928595 安装 sass 是预编译语言, 浏览器无法直接识别, 需要进行编译成 css 文件, 所以编译 sass 需要安装 sass-loader , sass-l...
webpack随笔03-sass
uikoo9的专栏
03-22 1145
【前言】 sass，css预编译语言的一种，还有less，stylus等，详见：Sass: Syntactically Awesome Style Sheets 简单来说就是自定义了一种语言，可以很方便的写css，并且最终会编译为css文件， 简单对比一下， less，由于bootstrap使用，所以用的人比较多，但是没有sass好用 sass，比较好用，之前基于ruby的问题，sass缩进的问题都有改善 【几种版本】 在官网上可以看到sass有几种版本 dart sass，这...
vue-cli + webpack + sass 搭建一个工程化项目
前端攻城狮
08-31 1429
环境安装 1、首先安装 node的环境，官网地址这里 检查是否安装成功 node -v //node的版本 npm -v //npm是node的包管理器 如果出现 “ 不是内部或外部命令，也不是可运行的程序 或批处理文件。”需要到环境变量中进行配置 node -v v10.5.0 npm -v 6.1.0 2、安装vue-cli 由于npm的服务器在国外，网速慢而且安装容易失...
使用webpack引入sass全局变量
Winne_Shen的专栏
06-09 8446
使用webpack引入sass全局变量       sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。傻瓜式引用   ...
Vue3中使用Sass详解
前端、python爱好者
11-01 1万+
相对于vue3使用less，在使用sass时会相较于麻烦一点，但也只是加一些配置就基本可以了vue3使用less需要安装的包以上两个安装完毕，就可以在组件中style标签加上lang使用less，具体参考如下接下来我们继续看看vue3如何使用sass，主要看第二步，在中需要添加的代码，安装包都是一样的操作，但是需要注意安装版本。......
vue2项目中使用sass，怎么做
04-25
在Vue2项目中使用sass，需要安装sass-loader和node-sass模块。可以通过以下命令进行安装： ``` npm install sass-loader node-sass --save-dev ``` 接着，在webpack配置文件中添加sass-loader配置，具体如下： ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值