Vue.js项目中如何将SCSS主文件编译为CSS主文件

算力阿峰

2026-8-9

解决Vue.js项目中SCSS主文件编译与加载问题

1. 确保SCSS依赖已安装

如果初始化项目时未选择SCSS预处理器，执行以下命令安装依赖：

npm install sass-loader sass --save-dev

2. 组织SCSS文件结构并引入子文件

将所有SCSS子文件（如variables.scss、mixins.scss等）通过@import引入到主文件style.scss中，示例如下：

// style.scss 主文件
// 引入同目录下的子SCSS文件，无需写后缀
@import "./variables";
@import "./mixins";
@import "./common";

// 在此添加全局样式
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

注意：根据子文件的实际路径调整@import的路径，若子文件在子目录中，需写成@import "./components/button";这类形式。

3. 在Vue项目中加载主SCSS文件

有两种常用方式实现编译与加载：

方式一：全局引入（推荐开发/生产通用）

在项目入口文件main.js中直接引入style.scss，Vue CLI会自动编译为CSS并注入到页面：

// main.js
import Vue from 'vue'
import App from './App.vue'
// 引入主SCSS文件，路径根据你的实际位置调整
import './assets/styles/style.scss'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

启动项目后，开发环境会将样式内联到页面，生产打包时会自动提取为单独的CSS文件。

方式二：配置打包输出单独的style.css（生产环境可选）

如果需要明确指定生产打包时输出的CSS文件名及路径，在项目根目录的vue.config.js中添加以下配置（若没有该文件则新建）：

module.exports = {
  css: {
    extract: {
      filename: 'css/style.css', // 输出到dist/css/style.css
      chunkFilename: 'css/[name].css'
    }
  }
}

执行npm run build后，即可在dist/css/目录下找到编译好的style.css文件。