Vue2.x 如何引入SASS(SCSS)或者LESS

最新推荐文章于 2025-07-16 13:53:19 发布
原创 最新推荐文章于 2025-07-16 13:53:19 发布 · 1.8k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#VUE #HTML #web #vue框架 #前端

在这里插入图片描述

@[toc](Vue2.x 如何引入SASS(SCSS)或者LESS)

在Vue.js 2.x项目中，使用预处理器如SASS(SCSS)或LESS可以提高CSS的组织性和可维护性。这些预处理器提供了变量、嵌套规则、混合（mixins）、继承等功能，使得CSS的编写更加高效和灵活。本文将详细介绍如何在Vue 2.x项目中引入并使用SASS(SCSS)和LESS，并通过具体的示例来展示其配置过程和使用方法。

预处理器的基本概念与作用

SASS 和 LESS 都是 CSS 预处理器，它们允许开发者使用类似于编程语言的特性来编写 CSS。这些特性包括变量、嵌套规则、混合（mixins）、继承等，可以使得 CSS 代码更加简洁、易于维护。

SASS vs LESS

  • SASS：有两种语法格式，分别是SCSS（类似于CSS）和原生SASS（没有大括号和分号）。
  • LESS：语法更接近于CSS，使用JavaScript风格的变量和函数。

安装与配置预处理器

为了让Vue项目支持SASS或LESS，我们需要安装相应的加载器，并配置Vue CLI。

示例一：安装SASS

# 安装SASS预处理器
npm install node-sass sass-loader --save-dev

示例二：安装LESS

# 安装LESS预处理器
npm install less less-loader --save-dev

在全局范围内使用预处理器

一旦安装了必要的依赖项，我们就可以在Vue项目中使用预处理器了。下面是如何在全局范围内配置SASS或LESS。

示例三：全局配置SASS

在vue.config.js文件中配置全局使用的SASS。

// vue.config.js
module.exports = {
   
   
  css: {
   
   
    loaderOptions: {
   
   
      sass: {
   
   
        // 为全局SASS变量文件设置路径
        additionalData: `@import "@/styles/variables.scss";`,
      },
    },
  },
最低0.47元/天 解锁文章

200万优质内容无限畅学
vue-cli2项目中使用scss
Hi_MrXiao的博客
05-21 1223
首先要搞清楚Sass和Scss的区别：实际上Sass和Scss是同一种东西，Scss是 Sass3 引入新的语法，它们都是css预处理器。：Sass 默认使用“.sass”作为文件扩展名，而 Scss 使用“.scss”作为扩展名。：Sass 最初是以严格的缩进式语法规则来书写，不带大括号和分号，这种方式使得代码更加简洁，但在某些情况下可能不如Scss直观易读；相比之下，Scss的语法允许使用大括号和分号，与常规的 css语法相似，这使得 Scss更容易被 css开发者接受和使用。
Vue项目自动注入less、sass、scss、stylus全局变量
我的博客
04-09 781
【代码】自动注入less（sass、scss、stylus）全局变量。
Vue2.引入sass
qq_45061461的博客
06-18 3001
base.conf.js文件，在该文件module.export中的module.rules加入解释scss文件的loade。在项目中的build目录找到。如果报错提示，就是版本过高。3.配置loader。
【UniApp】Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass
最新发布
乌昂王
07-16 3629
node-sass升级dart-sass常见问题及改进方法
vue2项目引入scss
辰苏.的博客
08-18 1992
3、可以使用了，在style中加入lang=”scss“就可以了。1、安装sass-loader。2、安装node-sass。
vue中使用sass
道阻且长，行之将至
03-07 637
【代码】vue中使用sass。
vue2使用sass
weixin_45809419的博客
10-29 1041
前提条件：使用vue-cli2创建的项目。
使用vue-cli初始化一个vue2的项目后，在该项目中引入sass编写css样式的步骤及踩坑
IT攻城狮-五月的博客
05-13 7004
可以看到我的电脑里安装的是14.16.0版本的node.js，这里为什么要看一下？如果踩过坑的小伙伴肯定知道，还没踩过坑的小伙伴查看过node.js的版本以后要记一下版本号，后面会用到。 这里 github 上给的安装命令是在你本地进行全局安装，而我们现在使用它的话是在项目的开发阶段进行使用，所以我们要在项目的根目录下运行 DOS 命令在开发环境中安装 sass。 执行安装命令成功后，可以在项目的 package.json 文件中的 devDependencies 项中看到新增了相应版本的 sass 依赖
详解vue项目中如何引入全局sass/less变量、function、mixin
08-27
Vue 项目中如何引入全局 Sass/Less 变量、函数、Mixin 在 Vue 项目中，如何引入全局 Sass/Less 变量、函数、Mixin 是一个常见的问题。今天，我们将详细介绍如何使用 sass-resources-loader 将全局 Sass/Less 变量、...
webpack3.x+vue2.x+sass项目中，sass提取全局引用
sinat_27514587的博客
11-03 769
此文首发于 https://lijing0906.github.io 接近年底，工作没有那么忙，业余时间就比较多了，就想着把小demo整合到一起，自己搭建一个项目。 在网上找了两篇博客作为参考：在vue中使用sass的配置的方法、vue引入sass全局变量 基础依赖包安装 安装sass-loader和node-sass(sass-loader依赖于node-sass)。-D是–save-dev的缩...
Vue 项目中 Sass 与 Less 的对比
在全栈和前端徘徊的程序员
05-28 1722
sass&less对比
详解Vue2 添加对scss的支持
12-07
引入loader cnpm install node-sass --save-dev cnpm install sass-loader --save-dev cnpm install style-loader --save-dev scss支持 为了使用scss，我们需要先安装相关的node包： npm install --save style-loader sass-loader node-sass file-loader 安装好之后，为了可以在.vue和.scss中使用，需要在webpack.config.js中配置对应的解析器： var webpack = require(
vue2中使用sass并配置全局的sass样式变量的方法
10-18
主要介绍了vue2中使用sass并配置全局的sass样式变量的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue2安装scss
活宝小娜的博客
03-13 732
2、新建src/styles/variables.scss文件，并在里面写一些常用的公共样式，在vue.config.js中添加css部分。
如何在vue2.0中使用sass
zhangkeke_的博客
03-13 568
如何在vue2.0中使用sass 背景 成功安装了sass！现在想把自己vue里面的css替换成scss! 你问我为什么！因为为了熟悉scss!后面再用vue等前端框架我就直接用scss! 解决 1.先换成淘宝镜像再安装 npm install -g cnpm --registry=https://registry.npm.taobao.org （安装淘宝镜像）用淘宝镜像...
在Vue2.0中全局引入SCSS文件
sunshineTing2的博客
07-31 2244
在Vue2.0中全局引入SCSS文件 一、安装 sass-loader 和 node-sass npm install sass-loader --save-dev npm install node-sass --save-dev 二、创建.scss文件 三、在app.vue中引入.scss文件 <style lang="scss"> //注意要用lang="sc...
Vue项目引入sass
weixin_34344403的博客
03-29 451
　　最近两天手头的事情暂时搞完了，可以抽出空来学习一下东西，之前项目都是鹏哥搭建好了，我们在直接在里面写代码，sass语法用来写样式还是比较方便常用的，今天就来试试怎么引入和配置sass 参考文章：Vue项目使用sass （1）首先是先用vue-cli构建一个新的vue项目 　　① 安装node 　　② node安装好后安装脚手架：npm install -g vue-cli 　　...
vue2引入公共的scss文件
Lycoriy的博客
01-06 587
vue项目中使用scss 第一步：下载依赖模块 npm install sass-resources-loader --save-dev 第二步：修改build文件夹下的utils.js 将 scss: generateLoaders('sass') 修改为 scss: generateLoaders('sass').concat( { loader: 'sass-res...
vue怎么引入外部样式文件，比如.css .scss .less
03-26
Vue 可以使用 import 或 require 引入外部样式文件，具体步骤如下： 1. 在 Vue 组件中的 `<template>` 标签中使用引入样式文件的标签，通常是在根元素的 class 上加上样式类名，如下所示： ``` <template> <div class="my-class"> ... </div> </template> ``` 2. 在 Vue 组件的 `<script>` 标签中引入样式文件，通常是使用 import 或 require 语句，在组件代码前面引入，如下所示： ``` <script> import 'path/to/your/style.css'; export default { // 组件代码 } </script> ``` 或者： ``` <script> require('path/to/your/style.css'); export default { // 组件代码 } </script> ``` 3. 注意，如果是引入 LESS 或 SCSS 文件，需要安装对应的预处理器和 loader，如 less-loader 或 sass-loader，并在 webpack 配置文件中进行相关配置。如下所示： ``` // webpack.config.js module.exports = { ... module: { rules: [ { test: /\.less$/, use: [ { loader: 'less-loader', options: { javascriptEnabled: true } } ] } ] } } ``` 4. 如果是在全局范围引入样式文件，可以在 Vue 应用的入口文件（如 `main.js`）中使用 import 或 require 引入样式文件，通常是在根元素的 class 上加上样式类名，如下所示： ``` import 'path/to/your/style.css'; new Vue({ el: '#app', render: h => h(App) }) ``` 或者： ``` require('path/to/your/style.css'); new Vue({ el: '#app', render: h => h(App) }) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DTcode7

客官，赏个铜板吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值