如何在vue中使用sass

时间:2022-05-04
本文章向大家介绍如何在vue中使用sass,主要内容包括使用sass,我们需要安装sass的依赖包、修改style标签、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。

使用sass,我们需要安装sass的依赖包

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

修改style标签

打开目录中的xxx.vue文件。 然后修改 style标签如下

<style lang="sass">

如果出现错误提示:无效的css。因为sass语法不使用大括号和分号。 如果你喜欢使用不带大括号的语法,只要去掉css代码的大括号和分号,即使用缩进语法。 如果你希望使用带大括号的语法,即SCSS 那么,你只要把lang="sass"改成lang="scss"就行了。