TypeError: Unknown file extension ".scss",

baiyuze commented 1 month ago

Describe the bug

I used element plus in vitepress and unplugin vue components to import styles and components as needed. Normally, npm run docs: dev works fine, but npm run docs: build reports an error. TypeError: Unknown file extension ". scss" for/Users/Guangdong/Desktop/Information ui/nodeModules/element plus/theme chat/src/base.scss

Also, it is normal for me not to configure vite.config.ts in vitepress. Request help

我使用vitepress中用了element-plus，同时用了unplugin-vue-components来按需导入样式及组件，正常npm run docs:dev正常，但是npm run docs:build就报错。TypeError: Unknown file extension ".scss" for /Users/guangguang/Desktop/information-ui/node_modules/element-plus/theme-chalk/src/base.scss

另外我不在vitepress中配置vite.config.ts是正常的。请求帮助

vite.config.ts:

import { defineConfig } from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'path'
import { optimizeLodashImports } from '@optimize-lodash/rollup-plugin'
import VueTypeImports from 'vite-plugin-vue-type-imports'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vueJsx(),
    VueTypeImports(),
    optimizeLodashImports(),
    Components({
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/, /\.tsx/, /\.jsx/],
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass',
        }),
      ],
    }),
  ],

  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src'),
      components: path.resolve(__dirname, '../src/components'),
      sdk: path.resolve(__dirname, '../src/cms/sdk.es.js'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/assets/styles/element.scss" as *;
        `,
      },
    },
  },
})

vitepress:

import { defineConfig } from 'vitepress'
export default defineConfig({
  title: '信息化组件库',
  description: '信息化组件库',
  base: '/',

  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: '快速开始', link: '/quick-start' },
    ],

    sidebar: {
      '/components': [
        {
          text: 'BaseContent 内容框',
          link: '/components/BaseContent',
        },
        {
          text: 'BaseDialog 对话框',
          link: '/components/BaseDialog',
        },
        {
          text: 'BaseDrawer 抽屉',
          link: '/components/BaseDrawer',
        },
        {
          text: 'BaseInput 抽屉',
          link: '/components/BaseInput',
        },
        {
          text: 'ConfirmBox 确认框',
          link: '/components/ConfirmBox',
        },
      ],
    },

    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
    ],
  },
})

npm run docs:dev  //OK
npm run docs:build // error

build error:
TypeError: Unknown file extension ".scss" for /Users/guangguang/Desktop/information-ui/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)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:21)

Reproduction

https://stackblitz.com/edit/vite-mp5jmc?file=docs%2Findex.md

Expected behavior

正常编译

System Info

System:
    OS: macOS 11.7
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400
    Memory: 25.62 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm
    pnpm: 6.32.10 - /usr/local/bin/pnpm
    bun: 1.0.33 - ~/.bun/bin/bun
    Watchman: 2023.04.17.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 123.0.6312.87
    Safari: 14.1.2
  npmPackages:
    vitepress: ^1.0.1 => 1.0.1

Additional context

No response

Validations

[X] Check if you're on the latest VitePress version.
[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

brc-dd commented 1 month ago

try adding this to your vite.config.ts

ssr: {
  noExternal: ['element-plus']
}

baiyuze commented 1 month ago

try adding this to your vite.config.ts
ssr: {
  noExternal: ['element-plus']
}
Not reporting. scss, but triggering another error SyntaxError: The requested module '@vueuse/core' does not provide an export named 'isBoolean'

baiyuze commented 1 month ago

try adding this to your vite.config.ts
ssr: {
  noExternal: ['element-plus']
}

I went to the @ vueuse/core library to check and found out that it was a version issue. I downgraded it to 9 and it was resolved. There are no errors now. Please write it down

brc-dd commented 1 month ago

It was fixed quite a while ago - https://github.com/element-plus/element-plus/pull/12504 -- you probably are on some older version of element-plus.

baiyuze commented 1 month ago

它很久以前就被修复了 - element-plus/element-plus#12504 - 你可能使用的是一些旧版本的 element-plus。

"It is indeed an old version of the component, but the new version, 2.6.2, still has a bug with useSelect. However, it has been fixed, but a new version has not been released yet, so there has been no upgrade.

However, it should also be related to the version of @vueuse/core used by the main body of the application.

Overall, as long as it can be resolved, it's fine. Thank you!"

vuejs / vitepress