vue引入外部scss文件

要在Vue项目中引入外部的SCSS文件，需要在main.js文件中导入SCSS文件，然后使用Vue CLI的vue-loader配置将SCSS编译为CSS。

以下是如何在Vue项目中导入外部SCSS文件的步骤：

1. 在项目的根目录下创建一个名为“styles”的文件夹。

2. 在styles文件夹中创建一个名为“main.scss”的文件，这将是你的主SCSS文件。

3. 在main.scss文件中导入你的其他SCSS文件，例如：

@import 'variables.scss';
@import 'mixins.scss';
@import 'buttons.scss';

4. 在main.js文件中导入main.scss文件，例如：

import './styles/main.scss';

5. 在vue.config.js文件中添加vue-loader的配置，以编译SCSS文件为CSS，例如：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/main.scss";`
      }
    }
  }
}

6. 重新启动你的Vue项目，现在你应该能够使用在外部SCSS文件中定义的变量和混合器。

注意：在使用前，请确保已安装sass-loader和node-sass依赖项。您可以通过以下命令安装它们：

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