【前端开发】Vue中引入Sass、Scss

作者：System 时间：2024年08月19日分类：所有,vue.js 字数：504

这篇文章距离上次修改已过238天，其中的内容可能已经有所变动。

在Vue项目中引入Sass或Scss，首先需要安装相应的loader。

安装sass和sass-loader：

npm install --save-dev sass sass-loader

在Vue组件中使用Sass：

<template>
  <div class="example">
    Hello, Vue with Sass!
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent'
}
</script>

<style lang="scss">
.example {
  color: blue;
  font-size: 20px;
  h1 {
    font-weight: bold;
  }
}
</style>

确保你的Vue组件的<style>标签中声明了lang="scss"属性。

以上是在Vue项目中引入Sass/Scss的基本步骤和示例代码。

【前端开发】Vue中引入Sass、Scss

评论已关闭

推荐阅读