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

普通方法

一、安装使用scss

1. 安装 scss

复制代码
npm install scss --save

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

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

npm i [email protected] -D

npm i [email protected] -D

版本对应关系:

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

复制代码
提示:在 build 文件夹目录下 webpack.base.conf.js 文件中,找到 rules 添加以下代码


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

4. 组件中使用 scss

复制代码
提示:在组件中style标签上添加属性 lang="scss",保存运行


<style lang="scss">
#app {
  background: $color;
}
</style>

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

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

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

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

添加代码:

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

      }

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

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

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

相关推荐
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Spark2382 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
随笔记2 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
樊小肆2 小时前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
JiangJiang2 小时前
揭秘Vue3源码之computed:懒计算与缓存机制全解析
前端·vue.js·面试
清灵xmf2 小时前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
web_Hsir3 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
爱摄影的程序猿4 小时前
如何基于 Django-Vue-Admin 快速二次开发?高效后台管理系统实战指南(附完整代码)
vue.js·python·django
前端极客探险家5 小时前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
随笔记5 小时前
vite构建工具和webpack构建工具有什么共同点和不同处
vue.js·react.js·webpack