如何在vite.config.js中导入并获取SCSS文件内容？

Vite的配置文件是直接在Node.js环境执行的，不经过Vite的模块处理流程，所以没法用前端组件里的import方式获取文件内容，得用Node.js原生工具结合SCSS编译工具来实现：

方法1：直接读取SCSS原文件内容 #

用Node.js的fs模块同步读取文件即可，适合只需要原SCSS代码的场景：

// vite.config.js
const fs = require('fs');
const path = require('path');

// 拼接文件绝对路径
const scssFilePath = path.resolve(__dirname, './src/extensions/sites/noscript/test.scss');
// 读取文件内容
const scssContent = fs.readFileSync(scssFilePath, 'utf-8');

console.log(scssContent); // 输出原SCSS代码

方法2：读取编译后的CSS内容 #

如果需要的是编译后的CSS内容，需要借助sass包先编译SCSS：

1. 先安装sass依赖：

npm install sass --save-dev

2. 在vite.config.js中使用：

// vite.config.js
const fs = require('fs');
const path = require('path');
const sass = require('sass');

const scssFilePath = path.resolve(__dirname, './src/extensions/sites/noscript/test.scss');

// 编译SCSS并获取CSS内容
const result = sass.compile(scssFilePath);
const cssContent = result.css;

console.log(cssContent); // 输出编译后的CSS代码

补充说明 #

• 前端组件里的import能拿到内容，是因为Vite对.css文件做了特殊处理，默认会将CSS内容作为字符串导出，但这个处理逻辑只在Vite构建的模块流程中生效，配置文件不在这个流程里。
• 如果你的目标文件是已经预编译好的.css文件，直接用方法1的fs.readFileSync读取即可，不需要sass编译。

内容的提问来源于stack exchange，提问作者Gorilka