vue如何引入scss样式

vue如何引入scss样式

在Vue项目中引入SCSS样式可以分为以下几个步骤：
1. 安装SCSS依赖

  首先，确保已安装了SCSS依赖。可使用以下命令安装：

  ```bash

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

  ```
2. 创建SCSS文件

  在项目的`src`目录下创建一个`styles`文件夹，然后在该文件夹下创建一个`main.scss`文件（还是其他你喜欢的命名）。

  ```scss

  // main.scss

  // 定义一些全局的样式

  $primary-color: #1890ff;

  body {

    background-color: $primary-color;

  }

  ```
3. 引入SCSS文件

  在Vue组件文件中引入刚刚创建的`main.scss`文件。

  ```vue

  ```

  注意，这里的`@`符号是Webpack的别名，指向项目的根目录。如果你的项目中没有配置这个别名，可使用相对路径引入。
4. 重启开发服务器

  当引入了SCSS样式后，需要重新启动开发服务器，这样Webpack才会编译SCSS文件并将其利用到项目中。

  ```bash

  npm run serve

  ```
现在，你就能够在Vue项目中使用SCSS样式了。