ts-plugin / ts-plugin/ts-import-plugin
Icons cannot be displayed when used with element-ui
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 603
- Forks
- 36
- Avg merge
- 1m
- Merged PRs (30d)
- 1
Description
Reproduction repo: https://github.com/HermitSun/element-ts-import-issue
I had to import an extra el-icon component, or an extra CSS file element-ui/lib/theme-chalk/icon.css, otherwise icons cannot be displayed. I used it with a project created by vue-cli. I think maybe the CSS file of element-ui's icons are not included.
My dependencies' versions:
- element-ui: 2.13.2
- camel-2-dash: 0.1.0
- ts-import-plugin: 1.6.6
- webpack-merge: 5.0.9
My vue.config.js:
const path = require("path");
const merge = require("webpack-merge");
const tsImportPluginFactory = require("ts-import-plugin");
const join = path.join;
const basename = path.basename;
const camel2Dash = require("camel-2-dash");
module.exports = {
chainWebpack: config => {
config.module
.rule("ts")
.use("ts-loader")
.tap(options => {
options = merge.merge(options, {
transpileOnly: true,
getCustomTransformers: () => ({
before: [
tsImportPluginFactory({
libraryName: "element-ui",
libraryDirectory: "lib",
camel2DashComponentName: true,
style: path =>
join(
"element-ui",
"lib",
"theme-chalk",
`${camel2Dash(basename(path, ".js"))}.css`
)
})
]
}),
compilerOptions: {
module: "es2015"
}
});
return options;
});
}
};
How I used it (but not work as expect):
import Vue from 'vue';
import { DatePicker } from 'element-ui';
export default Vue.extend({
name: 'App',
components: {
[DatePicker.name]: DatePicker
},
data() {
return {
value1: ''
}
},
});
The code can work as expect:
import Vue from 'vue';
import { DatePicker } from 'element-ui';
import 'element-ui/lib/theme-chalk/icon.css'; // <- just add this line
export default Vue.extend({
name: 'App',
components: {
[DatePicker.name]: DatePicker
},
data() {
return {
value1: ''
}
},
});
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the reproduction repository and reviewing its vue.config.js, then compare the generated imports for DatePicker with and without the ts-import-plugin configuration. Confirm whether the generated output includes element-ui/lib/theme-chalk/icon.css; done means the icons render without manually importing icon.css or an extra el-icon component.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100