vue项目中使用scss

在Vue项目中使用SCSS，首先需要确保你的项目支持SCSS。大多数现代Vue项目模板已经内置了对SCSS的支持。

1. 安装依赖：

   确保你已经安装了node-sass或sass-loader以及webpack。

npm install --save-dev sass-loader node-sass webpack

2. 在Vue组件中使用SCSS：

<template>
  <div class="example">
    <p>This is a paragraph with SCSS styling.</p>
  </div>
</template>
 
<script>
export default {
  name: 'ExampleComponent'
}
</script>
 
<style lang="scss">
.example {
  p {
    color: blue;
    font-size: 16px;
  }
}
</style>

3. 配置Vue CLI项目中的vue.config.js（如果需要）：

如果你的项目是通过Vue CLI创建的，并且你需要对默认配置进行修改，你可以添加或修改vue.config.js文件。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/styles/variables.scss";`
      }
    }
  }
};

这样配置后，你就可以在Vue组件的<style>标签中使用SCSS了。