ts-plugin / ts-plugin/ts-import-plugin

Icons cannot be displayed when used with element-ui

Open
#547 0 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.