温馨提示×

vue怎么引入scss样式

小亿
167
2023-06-29 14:22:40
栏目: 编程语言

在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样式了。

0