vue3 vite 引入scss javascriptEnable :true报错

Question

vue3 vite 引入scss javascriptEnable :true报错

求老哥解答

已经安装了scss包

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Vue3 Vite 引入 SCSS 报错解决方案

你遇到的问题是 Vite 在引入 SCSS 文件时，报错了 javascriptEnable :true。这是因为 Vite 在 default 配置中，SCSS 文件是被编译成 CSS 文件的，而不是 JavaScript 文件。

解决方案是，在 vite.config.js 文件中，添加以下配置：

import { defineConfig } from 'vite';
import scss from 'vite-plugin-scss';

export default defineConfig({
  plugins: [
    scss({
      // 将 SCSS 文件编译成 JavaScript 文件
      output: 'inline',
    }),
  ],
});

这将使 Vite 将 SCSS 文件编译成 JavaScript 文件，可以正常使用 javascriptEnable :true。

如果你使用 TypeScript，可以在 tsconfig.json 文件中添加以下配置：

{
  "compilerOptions": {
    // ...
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

这将使 TypeScript 可以正确地解析 SCSS 文件。

如果你仍然遇到问题，可以尝试在 vite.config.js 文件中添加以下配置：

import { defineConfig } from 'vite';
import scss from 'vite-plugin-scss';

export default defineConfig({
  plugins: [
    scss({
      // 将 SCSS 文件编译成 CSS 文件
      output: 'css',
    }),
  ],
});

这将使 Vite 将 SCSS 文件编译成 CSS 文件，可以正常使用 javascriptEnable :true。