Vue 中使用 Sass 踩的坑

news/2024/7/10 0:34:43 标签: vue, css, Sass, npm

这两天在vue脚手架中使用Sass，踩了几个坑，分享出来。

在 Vue cli3 中安装

$ npm i sass sass-loader -D
  • 首先，要安装的是两个，sass sass-loader
  • 其次，一定要安装在开发依赖中，因为它是CSS的预处理器。-D即为--save -dev的缩写，这是第一个坑
  • 然后，你可以能会出现以下两个问题
    • Sass中的独特语法，如嵌套写法，不生效
    • 甚至你连编译都过不去，项目起不来，报错
  • 那么解决方法呢？其实大概率是因为你的sass-loader的版本过高，降低版本即可
    • 可以package.json中修改为"sass-loader": "^7.3.1"
    • 或者直接卸载重装$ npm i sass-loader@7.3.1 -D

更新

2021/3/24
在vue3中使用sass，要安装node-sass，sass-loader。后者目前笔者所知的可使用版本为"sass-loader": "^10.1.1"，前者似乎对版本要求不高。

结语

如果对你有帮助的话，请点一个赞吧


http://www.niftyadmin.cn/n/1257952.html

相关文章

Sass学习

Sass学习

前言 这两天刚好学到sass，分享一下自己在学习过程中总结的点 正文 基本用法 sass中导入另一个sass import "路径" 注释 单行注释 //，编译后省略，只会保留在sass源文件中多行注释 /* */ ，会保留在编译后的css文件中重…
阅读更多...
vue 中编写404页面

vue 中编写404页面

前言 今日给自己项目添加404页面时&#xff0c;踩了一点坑&#xff0c;分享给大家。 正文 <div class"_404"><h2 class"m-0">抱歉&#xff0c;页面未找到&#xff0c;<span>{{countDown}}</span>s后自动跳转到<a href"j…
阅读更多...
async await 对比 Promise

async await 对比 Promise

async && await 对比 Promise 的优点 处理异常 Promise 不能catch到Promise内部的异常 //Promise写法 async function returnPromise() {return ok }try {returnPromise().then(res > {console.log(res)throw new Error(可能出错的位置)}).catch(reason > {co…
阅读更多...
Vue 数据响应式详解

Vue 数据响应式详解

前言 Vue最具特色的一点&#xff0c;就是数据驱动&#xff0c;即你不用写复杂的DOM操作&#xff0c;只需专心于业务所用到的数据。 那么&#xff0c;Vue的数据响应式到底是怎么实现的呢&#xff1f; 正文 数据变化的过程 侦测数据的变化 (数据劫持 / 数据代理)收集视图依赖…
阅读更多...
const 关键字

const 关键字

可能有的误解 对于 ES6 中增加的const关键字&#xff0c;很多人的&#xff08;包括我自己&#xff09;都有一些误解。这个误解是&#xff1a;使用const关键字定义的变量是无法被修改的&#xff0c;即必须在定义的时候就赋值。这话不能说是全错&#xff0c;只是对简单类型和引用…
阅读更多...
then 方法

then 方法

then()方法 如果不是第一个参数函数&#xff0c;则会忽略这个then()&#xff0c;例如 func() .then(hello) //这个then会被忽略 .then(res>{console.log(res) })resolve(arg)的参数arg会传到紧接着的.then(callback(arg))中如果你读懂了下面的例子&#xff0c;那么说明你对t…
阅读更多...
数组和伪数组的区别

数组和伪数组的区别

正文 常见的伪数组有&#xff1a;函数参数arguments&#xff0c;DOM对象列表(例如document.querySelectorAll(div))&#xff0c;jQuery中的$(div)等Array.prototype 伪数组没有Array.prototype&#xff0c;它只是一个对象数组有Array.prototype&#xff0c;他是对象的同时&…
阅读更多...
一道经典的 js 面试题

一道经典的 js 面试题

原题目 在浏览器环境下&#xff0c;判断程序输出的结果是&#xff1f; var foo window的foolet obj {foo: obj的foo,func() {let self thisconsole.log(this.foo)console.log(self.foo);(function () {console.log(this.foo)console.log(self.foo)})()}}obj.func()console.…
阅读更多...
最新文章

Copyright @ 2022~2023