Skip to content
This repository has been archived by the owner on Jan 23, 2022. It is now read-only.

[FR] element-plus ^1.0.2-beta.59 support #19

Open
wenfangdu opened this issue Jul 28, 2021 · 9 comments · May be fixed by #23
Open

[FR] element-plus ^1.0.2-beta.59 support #19

wenfangdu opened this issue Jul 28, 2021 · 9 comments · May be fixed by #23

Comments

@wenfangdu
Copy link

wenfangdu commented Jul 28, 2021

Due to an i18n breaking change in 1.0.2-beta.59, the current generated setup would throw:

These dependencies were not found:

* element-plus/lib/theme-chalk/use-locale-props.css in ./src/main.js
* element-plus/lib/theme-chalk/use-locale.css in ./src/main.js
* element-plus/lib/use-locale in ./src/main.js
* element-plus/lib/use-locale-props in ./src/main.js

Related issue:

@jw-foss
Copy link
Member

jw-foss commented Jul 30, 2021

Do you want to update this for the updates?

@wenfangdu
Copy link
Author

@JeremyWuuuuu Yes, I can do it if the upstream issue gets fixed.

@jw-foss
Copy link
Member

jw-foss commented Jul 30, 2021

Use locale didn't have any exported CSS since it is not a component at all, to get this fixed, you need to update the plugin configuration, to ignore the pattern of /^use/

@jw-foss
Copy link
Member

jw-foss commented Jul 30, 2021

To be more specific:

babel.config.js

{
  customStyleName: (name) => {
      if (/^use/.test(name)) return ''
      name = name.slice(3)
        return `element-plus/packages/theme-chalk/src/${name}.scss`;
      },
}

@jw-foss
Copy link
Member

jw-foss commented Jul 30, 2021

The vite plugin goes the same way, you need to do a little bit tweak on that though, we are planning to build a vite plugin of our own, so that you won't need to worry about that anymore.

@wenfangdu
Copy link
Author

wenfangdu commented Jul 30, 2021

@JeremyWuuuuu I've updated babel.config.js to the following in my repro:

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        customStyleName: name =>
          /^use/.test(name) ? '' : `element-plus/lib/theme-chalk/${name}.css`,
      },
    ],
  ],
}

Seems not working.

@jdinartejesus
Copy link

@wenfangdu you forgot to add the name.slice(3).

From Jeremy:

{
  customStyleName: (name) => {
      if (/^use/.test(name)) return ''
      name = name.slice(3)
        return `element-plus/packages/theme-chalk/src/${name}.scss`;
      },
}

@wenfangdu
Copy link
Author

wenfangdu commented Aug 12, 2021

@JeremyWuuuuu Even return empty string for customStyleName will throw:

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        customStyleName: () => '',
      },
    ],
  ],
}
These dependencies were not found:

* element-plus/lib/use-locale in ./src/main.js
* element-plus/lib/use-locale-props in ./src/main.js
* element-plus/packages/theme-chalk/src/-locale-props.scss in ./src/main.js
* element-plus/packages/theme-chalk/src/-locale.scss in ./src/main.js

To install them, you can run: npm install --save element-plus/lib/use-locale element-plus/lib/use-locale-props element-plus/packages/theme-chalk/src/-locale-props.scss element-plus/packages/theme-chalk/src/-locale.scss

I've updated my repro to reflect this, please have a look.

@wenfangdu
Copy link
Author

I gave up using option 2, option 1 works just fine. I've fixed the above repro using option 1.

wenfangdu added a commit to wenfangdu/vue-cli-plugin-element-plus that referenced this issue Aug 18, 2021
@wenfangdu wenfangdu linked a pull request Aug 18, 2021 that will close this issue
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants