如何配置Vue与SCSS?

1. 安装必要的依赖包

npm install sass-loader node-sass vue-style-loader --save-dev

2. 在webpack配置中，添加以下规则

{
   test: /\.scss$/,
   use: [
       'vue-style-loader',
       'css-loader',
       'sass-loader'
   ]
}

3. 在Vue组件中，引入SCSS文件，并使用

比如，我们可以在App.vue中这样写：

<template>
    <div class="my-component">Hello world!</div> 
</template>

<style lang="scss">
   .my-component {
       background: #fff;
       color: red;
   }
</style>

4. 在main.js中，添加以下内容以使用SCSS

import './styles/main.scss'

然后你就可以在main.scss中编写一些全局的SCSS样式。

请注意，如果您使用的是vue-cli构建的项目，则可以在vue.config.js文件中进行更改，而不是在webpack配置文件中进行更改。