[Bug report] 当使用 ElementPlusResolver 动态引入 elementPlus 打包[pnpm]时报错不认识 css / scss

[WangJincheng4869]

Description

只有打包的时候会报以下错误，但可以正常运行，就是很玄学...

✖ Rendering 31 pages - failed in 427ms
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".scss" for D:\Web Workspace\CODE_Develop\Service_Products\BasicPaper\webCode\basic-paper-cloud-vue3\node_modules\.pnpm\e[email protected][email protected]\node_modules\element-plus\theme-chalk\src\base.scss
    at new NodeError (node:internal/errors:399:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:605:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:64:26)
    at #createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34)
 ELIFECYCLE  Command failed with exit code 1.

import { defineUserConfig, viteBundler } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
import { sidebar } from "./configs/sidebar";
import { navbar } from "./configs/navbar";
import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
import { resolve } from "path";
import svgLoader from "vite-svg-loader";
import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
import { searchProPlugin } from "vuepress-plugin-search-pro";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineUserConfig({
  host: "0.0.0.0",
  port: 5174,
  base: "/basic-paper-cloud-docs/",
  lang: "zh-CN",
  title: "BasicPaperCloud",
  description: "BasicPaperCloud 前后端分离开发文档",
  alias: {
    "@": resolve(__dirname, "../../src"),
  },
  bundler: viteBundler({
    viteOptions: {
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: `@use "@/styles/element/index.scss" as *;`,
          },
        },
      },
      plugins: [
        // https://github.com/jpkleemans/vite-svg-loader
        svgLoader(),
        // https://github.com/antfu/unplugin-auto-import
        AutoImport({
          imports: [
            'vue',
          ],
          dirs: [
            'src/util/**',
            'src/hooks/**',
          ],
          dts: 'types/auto-imports.d.ts',
          cache: 'unplugin-auto-import.json',
          resolvers: [
            ElementPlusResolver({
              importStyle: "css",
            }),
          ],
        }),
        // https://github.com/antfu/unplugin-vue-components
        Components({
          // 只用ElementPlus的按需导入，故不扫描自己的项目文件
          dirs: [],
          dts: "types/components.d.ts",
          resolvers: [
            ElementPlusResolver({
              importStyle: "css",
            }),
          ],
        }),
        // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
        VueI18nPlugin({
          runtimeOnly: true,
          compositionOnly: true,
          include: [resolve(__dirname, "../../locales/**")],
        }),
      ],
      ssr: {
        /**
         * 由于在 build 时会报错 SyntaxError: Named export 'createI18n' not found.
         * The requested module 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js' is a CommonJS module, which may not support all module.exports as named exports.
         * 所以要添加以下配置。详见：https://vite-plugin-ssr.com/common-issues 与 https://vite-plugin-ssr.com/invalid-esm#solution
         */
        noExternal: ['vue-i18n']
      }
    }
  }),
  theme: hopeTheme({
    navbar: navbar,
    sidebar: sidebar,
    lastUpdated: true,
    plugins: {
      copyCode: {
        showInMobile: true
      },
      autoCatalog: true,
    }
  }),
  plugins: [
    searchProPlugin({
      queryHistoryCount: 8,
      resultHistoryCount: 8,
      locales: {
        '/': {
          placeholder: '搜索文档',
          search: '搜索文档',
        }
      }
    }),
    // 根据组件文件或目录自动注册 Vue 组件 https://v2.vuepress.vuejs.org/zh/reference/plugin/register-components.html
    registerComponentsPlugin({
      componentsDir: resolve(__dirname, '../../src/components'),
    })
  ],
});

Reproduction

vuepress bulid Unknown file extension scss.zip

Used Package Manager

pnpm

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 11.39 GB / 31.56 GB
  Binaries:
    Node: 18.14.2 - D:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 9.2.0 - D:\Users\jcwang\AppData\Roaming\npm\npm.CMD
  Utilities:
    Git: 2.40.0.
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22621.1555.0), Chromium (112.0.1722.48)
  npmPackages:
    @vuepress/bundler-vite: 2.0.0-beta.61 => 2.0.0-beta.61 
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli: Not Found
    @vuepress/client: 2.0.0-beta.61 => 2.0.0-beta.61 
    @vuepress/core: Not Found
    @vuepress/markdown: Not Found
    @vuepress/plugin-active-header-links: Not Found
    @vuepress/plugin-back-to-top: Not Found
    @vuepress/plugin-container: Not Found
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-external-link-icon: Not Found
    @vuepress/plugin-git: Not Found
    @vuepress/plugin-google-analytics: Not Found
    @vuepress/plugin-medium-zoom: Not Found
    @vuepress/plugin-nprogress: Not Found
    @vuepress/plugin-palette: Not Found
    @vuepress/plugin-prismjs: Not Found
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-register-components: 2.0.0-beta.61 => 2.0.0-beta.61
    @vuepress/plugin-search: Not Found
    @vuepress/plugin-shiki: Not Found
    @vuepress/plugin-theme-data: Not Found
    @vuepress/plugin-toc: Not Found
    @vuepress/shared: Not Found
    @vuepress/theme-default: Not Found
    @vuepress/utils: Not Found
    vue: ^3.2.47 => 3.2.47
    vue-loader: Not Found
    vue-router: ^4.1.6 => 4.1.6
    vuepress: 2.0.0-beta.61 => 2.0.0-beta.61
    vuepress-vite: Not Found
    vuepress-webpack: Not Found

[github-actions]

Hello @WangJincheng4869. Please provide a minimal reproduction using a GitHub repository or v2.vuepress.vuejs.org/new. Issues marked with need reproduction will be closed if they have no activity within 7 days.

[Mister-Hope]

Since the scss import error is handled by nod esm importer, double check whether you import any scss file at node side.

Bundler should recognize scss file and we are using scss files in default theme and theme-hope.

This issue may be related to #1283 if you are using npm.

Before further discussion, a minimal reproduction is required. This means you should remove any unrelated pages, config (especially vite plugins)

[WangJincheng4869]

Since the scss import error is handled by nod esm importer, double check whether you import any scss file at node side.

Bundler should recognize scss file and we are using scss files in default theme and theme-hope.

This issue may be related to #1283 if you are using npm.

Before further discussion, a minimal reproduction is required. This means you should remove any unrelated pages, config (especially vite plugins)

我想问一下有没有类似的问题，我想参考一下。

目前的现象是如果我 使用 ElementPlusResolver 打包时就会报这个错，如果配置成 sass 那么就会报 不认识 SCSS，配置成 CSS 就会报 不认识 CSS

但是：我在正常的项目中是没有这个问题的，可以正常打包，只有 vuepress 无法打包（我是将 vuepress 集成在项目中的）

另外：我在 vuepress 中自己写的组件也是没有问题的。这就很难判断 到底是 vuepress 的问题，还是 ElementPlusResolver 插件的问题....

[WangJincheng4869]

已解决，忽略SSR即可

noExternal: ['vue-i18n', 'element-plus', '@vueuse/core']

[ruofee]

vuepress2 有 noExternal 这个 api 吗，为啥我没找到 😂

[WangJincheng4869]

vuepress2 有 noExternal 这个 api 吗，为啥我没找到 😂