Vue项目中 安装及使用Sass(scss)

普通方法

一、安装使用scss

1. 安装 scss

javascript 复制代码
npm install scss --save

2. 安装 node-sass 和 sass-loader
sass-loader:把 sass编译成css
node-sass:nodejs环境中将sass转css

bash 复制代码
提示:限制 node-sass,sass-loader 版本号,防止默认安装的版本号过高

npm i sass-loader@7.3.1 -D

npm i node-sass@4.14.1 -D

版本对应关系:

3. 配置 webpack.base.conf.js 文件

bash 复制代码
提示:在 build 文件夹目录下 webpack.base.conf.js 文件中,找到 rules 添加以下代码
javascript 复制代码
rules: [
  {
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
  },
]

4. 组件中使用 scss

bash 复制代码
提示:在组件中style标签上添加属性 lang="scss",保存运行
css 复制代码
<style lang="scss">
#app {
  background: $color;
}
</style>

参考链接:https://blog.csdn.net/weixin_45665171/article/details/129830928

另辟蹊径的一个安装方法:

为什么会有这个安装方法,是因为我在使用常规安装方法时,会出现版本不兼容问题,导致安装失败,所以 尝试了一个新的方法,如下

1.在 webpack.base.conf.js 文件中配置, 使用 sass 和 sass-loader

添加代码:

javascript 复制代码
  {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]

      }

2.在这个配置中,你不需要指定 sass-loader 的版本,因为它会根据 npm 依赖项自动安装合适的版本。你只需要确保 package.json 中指定了所需的版本范围:

javascript 复制代码
// package.json
{
  "devDependencies": {
    "sass-loader": "^10.0.0", // 或者你需要的任何兼容版本
    "sass": "^1.26.0" // 对应 Dart Sass 的版本
  }
}

然后运行 npm install 来安装依赖。项目就可以正常使用sass啦~

相关推荐
码上暴富19 分钟前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
老华带你飞1 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
YAY_tyy1 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
m0_748461394 小时前
Spring Boot + Vue 项目中使用 Redis 分布式锁案例
vue.js·spring boot·redis
珍珠奶茶爱好者5 小时前
vue二次封装ant-design-vue的table,识别columns中的自定义插槽
前端·javascript·vue.js
Slice_cy5 小时前
深入剖析 Vue 响应式系统:从零实现一个精简版
vue.js
羊羊小栈6 小时前
基于「YOLO目标检测 + 多模态AI分析」的PCB缺陷检测分析系统(vue+flask+数据集+模型训练)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
晚星star6 小时前
在 Web 前端实现流式 TTS 播放
前端·vue.js
本末倒置1836 小时前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试
不一样的少年_7 小时前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js