[ElementUI] Styling is not applied to new webpack/element-ui project

Hello, I created a new webpack project using vue-cli. Then I installed element-ui using npm install element-ui. I added these lines to my main.js:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

Then I added some <h1> and <a> tags to my HelloWorld.vue. But it looks like there is no “chalk theme” styling/typography applied to my pages. They are rendered with browser default fonts. The <el-button> element has the correct background colors applied to it so it looks ok, but other then that the other elements looks like no styles have been applied. I am attaching a screenshot:

What might be the problem?

My package.json is this:

{
  "name": "element-deneme",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "Me <me@gmail.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "element-ui": "^2.0.11",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

npm install element-ui???
It’s wrong.
you should use npm i element-ui -Shttp://element.eleme.io/#/en-US/component/installation

Isn’t -S argument just for saving that dependency into package.json? What does it have to do with runtime behaviour?

I tried your solution anyway, the result is the same, it only added element-ui dependency to package.json.

But there is no element-ui in the package.json

It doesn’t mean it is not installed (el-button is working for example). I know I should save dependencies in a “real” project, this is just a hello world project and the error is unrelated to not saving the dependency into package.json.

Edit: I edited my first post to show my package.json so that it reflects the state after -S option. I hope it makes you happy :slight_smile:

I’m having the same exact problem.

If you can see the default button rendered, it means the “chalk theme” is correctly applied. If you are looking for fancy layouts, you might need to create them yourself.

Element UI website has a few examples.
http://element.eleme.io/#/en-US/component/container

For everyone having this same issue, just add this line in your element/main/etc .js file:

import 'element-ui/lib/theme-chalk/reset.css'

It should fix the problem right away!

6 Likes

Thank you! it works!

Thanks, it fixed my problem

Thanks, no idea why this works! But thank you!! :slight_smile: